Add the option to set a icon for the toast title

README.md

@@ -23,6 +23,7 @@ You can pass to the `$.toast` function an object with the settings for your toas
 | type          | Determines the style of the toast based on Bootstrap styles | 'info'   | 'info', 'success', 'warning', 'error' |
 | delay         | Determines how long the Toast shoud be shown for.  The default, -1, will show the toast until the user clicks close. | -1 | omit or set to -1 to disable auto close, or timeout value in milliseconds
 | img           | Shows an image before the title | N/A | { src: '', class: '', title: '', alt: '' }
+| icon           | Shows an icon before title | N/A | A complete icon class of your own. Example "fas fa-user-secret", show secret user
 | pause_on_hover| true/false respectively to pause on hover | false | true/false  |
 | container     | Set the container inside which the toasts will be displayed | $("body") | A JQuery selector |
 

css/toast.css

@@ -26,3 +26,8 @@
 .toast-container>.toast-wrapper>.toast>.toast-header strong {
     padding-right: 20px;
 }
+
+.toast-container > .toast-wrapper > .toast > .toast-header i {
+    padding-top:2px;
+    margin-right:7px;
+}

dist/toast.min.css

@@ -3,4 +3,4 @@
  * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
  * @version 0.7.1
  **/
-.toast-container{position:sticky;z-index:1055;top:0}.toast-wrapper{position:absolute;z-index:1055;top:0;right:0;margin:5px}.toast-container > .toast-wrapper > .toast{min-width:150px;background-color:rgb(255, 255, 255);border-top:none}.toast-container > .toast-wrapper > .toast > .toast-header strong{padding-right:20px}
+.toast-container{position:sticky;z-index:1055;top:0}.toast-wrapper{position:absolute;z-index:1055;top:0;right:0;margin:5px}.toast-container > .toast-wrapper > .toast{min-width:150px;background-color:rgb(255, 255, 255);border-top:none}.toast-container > .toast-wrapper > .toast > .toast-header strong{padding-right:20px}.toast-container > .toast-wrapper > .toast > .toast-header i{padding-top:2px;margin-right:7px;}

example/index.html

@@ -19,6 +19,8 @@
         <br>
         <button class="btn-block btn-primary" onclick="show_image_toast();">Show Image Toast</button>
         <br>
+        <button class="btn-block btn-primary" onclick="show_icon_toast();">Show Icon Toast</button>
+        <br>
         <button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>
         <br>
         <button class="btn-block btn-primary" onclick="show_toast_in_container();">Show Toast in Container</button>
@@ -86,6 +88,21 @@
                 });
             }
 
+            function show_icon_toast() {
+                let type = TYPES[Math.floor(Math.random() * TYPES.length)],
+                    title = TITLES[type],
+                    content = CONTENT[type];
+
+                $.toast({
+                    title: title,
+                    subtitle: '11 mins ago',
+                    content: content,
+                    type: type,
+                    delay: 5000,
+                    icon: 'fas fa-user-secret'
+                });
+            }
+
             function show_random_snack() {
                 let type = TYPES[Math.floor(Math.random() * TYPES.length)],
                     content = CONTENT[type].replace('toast', 'snack');

js/toast.js

@@ -36,6 +36,7 @@
             type = opts.type || 'info',
             delay = opts.delay || -1,
             img = opts.img,
+            icon = opts.icon,
             pause_on_hover = opts.pause_on_hover || false,
             pause = false,
             delay_or_autohide = '';
@@ -92,6 +93,10 @@
             html += '<img src="' + img.src + '" class="' + (img.class || '') + ' mr-2" alt="' + (img.alt || 'Image') + '" ' + (typeof img.title !== 'undefined' ? 'data-toggle="tooltip" title="' + img.title + '"' : '') + '>';
         }
 
+        if (typeof icon !== 'undefined') {
+            html += '<i class="' + (icon || '') + '" aria-hidden="true"></i>';
+        }
+
         html += '<strong class="mr-auto">' + title + '</strong>';
         html += '<small class="' + fg_subtitle_class + '">' + subtitle + '</small>';
         html += '<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';