diff --git a/README.md b/README.md
index 5c148ce..9aea745 100644
--- a/README.md
+++ b/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 |
diff --git a/css/toast.css b/css/toast.css
index fbab545..e98072c 100644
--- a/css/toast.css
+++ b/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;
+}
diff --git a/dist/toast.min.css b/dist/toast.min.css
index 6fa9ca2..9fd1318 100644
--- a/dist/toast.min.css
+++ b/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;}
diff --git a/example/index.html b/example/index.html
index 8dd891f..6ee60c9 100644
--- a/example/index.html
+++ b/example/index.html
@@ -19,6 +19,8 @@
+
+
@@ -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');
diff --git a/js/toast.js b/js/toast.js
index 74575fd..27d4720 100644
--- a/js/toast.js
+++ b/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 += '';
}
+ if (typeof icon !== 'undefined') {
+ html += '';
+ }
+
html += '' + title + '';
html += '' + subtitle + '';
html += '