mirror of
https://github.com/NodeBB/NodeBB.git
synced 2026-06-17 18:12:14 +02:00
feat(fontawesome): New FontAwesome Icon selector (#11010)
* feat: search via FA api in icon picker * feat: new initial icon list * fix: only trigger search if the query changed avoids sending a request for eg. a ctrl key press * fix: change deprecated .click() to .trigger(click) * feat: debounce icon search * fix: use debounce properly
This commit is contained in:
Opliko
GitHub
@@ -122,13 +122,13 @@ body {
|
||||
.nbb-fa-icons {
|
||||
margin: 0;
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
line-height: 24px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: $gray-800;
|
||||
margin: 3px;
|
||||
margin: 4px;
|
||||
|
||||
&:hover, &.selected {
|
||||
background: $primary;
|
||||
|
||||
@@ -3,11 +3,231 @@
|
||||
|
||||
define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) {
|
||||
const iconSelect = {};
|
||||
|
||||
const initialIcons = [
|
||||
{ id: 'nbb-none', label: 'None (NodeBB)', style: 'nodebb' },
|
||||
{ id: 'youtube', label: 'YouTube (brands)', style: 'brands' },
|
||||
{ id: 'window-restore', label: 'Window Restore (solid)', style: 'solid' },
|
||||
{ id: 'window-maximize', label: 'Window Maximize (solid)', style: 'solid' },
|
||||
{ id: 'rectangle-xmark', label: 'Rectangle X Mark (solid)', style: 'solid' },
|
||||
{ id: 'triangle-exclamation', label: 'Triangle exclamation (solid)', style: 'solid' },
|
||||
{ id: 'phone-volume', label: 'Phone Volume (solid)', style: 'solid' },
|
||||
{ id: 'video', label: 'Video (solid)', style: 'solid' },
|
||||
{ id: 'address-card', label: 'Address Card (solid)', style: 'solid' },
|
||||
{ id: 'user', label: 'User (solid)', style: 'solid' },
|
||||
{ id: 'circle-user', label: 'Circle user (solid)', style: 'solid' },
|
||||
{ id: 'usb', label: 'USB (brands)', style: 'brands' },
|
||||
{ id: 'sort', label: 'Sort (solid)', style: 'solid' },
|
||||
{ id: 'unlock', label: 'unlock (solid)', style: 'solid' },
|
||||
{ id: 'link-slash', label: 'Link Slash (solid)', style: 'solid' },
|
||||
{ id: 'trash-can', label: 'Trash can (solid)', style: 'solid' },
|
||||
{ id: 'transgender', label: 'Transgender (solid)', style: 'solid' },
|
||||
{ id: 'mars-and-venus', label: 'Mars and Venus (solid)', style: 'solid' },
|
||||
{ id: 'square-caret-up', label: 'Square caret up (solid)', style: 'solid' },
|
||||
{ id: 'square-caret-right', label: 'Square caret right (solid)', style: 'solid' },
|
||||
{ id: 'square-caret-left', label: 'Square caret left (solid)', style: 'solid' },
|
||||
{ id: 'square-caret-down', label: 'Square caret down (solid)', style: 'solid' },
|
||||
{ id: 'circle-xmark', label: 'Circle X Mark (solid)', style: 'solid' },
|
||||
{ id: 'thumbs-up', label: 'thumbs-up (solid)', style: 'solid' },
|
||||
{ id: 'thumbs-down', label: 'thumbs-down (solid)', style: 'solid' },
|
||||
{ id: 'thumbtack', label: 'Thumbtack (solid)', style: 'solid' },
|
||||
{ id: 'temperature-full', label: 'Temperature full (solid)', style: 'solid' },
|
||||
{ id: 'temperature-three-quarters', label: 'Temperature three quarters (solid)', style: 'solid' },
|
||||
{ id: 'temperature-half', label: 'Temperature half (solid)', style: 'solid' },
|
||||
{ id: 'temperature-quarter', label: 'Temperature quarter (solid)', style: 'solid' },
|
||||
{ id: 'temperature-empty', label: 'Temperature empty (solid)', style: 'solid' },
|
||||
{ id: 'tv', label: 'Television (solid)', style: 'solid' },
|
||||
{ id: 'bars-progress', label: 'Bars progress (solid)', style: 'solid' },
|
||||
{ id: 'gauge-high', label: 'Gauge (solid)', style: 'solid' },
|
||||
{ id: 'tablet-screen-button', label: 'Tablet screen button (solid)', style: 'solid' },
|
||||
{ id: 'life-ring', label: 'Life Ring (solid)', style: 'solid' },
|
||||
{ id: 'sun', label: 'Sun (solid)', style: 'solid' },
|
||||
{ id: 'circle-stop', label: 'Circle stop (solid)', style: 'solid' },
|
||||
{ id: 'note-sticky', label: 'Note sticky (solid)', style: 'solid' },
|
||||
{ id: 'star', label: 'Star (solid)', style: 'solid' },
|
||||
{ id: 'star-half-stroke', label: 'Star half stroke (solid)', style: 'solid' },
|
||||
{ id: 'square', label: 'Square (solid)', style: 'solid' },
|
||||
{ id: 'arrow-down-9-1', label: 'Arrow down 9 1 (solid)', style: 'solid' },
|
||||
{ id: 'arrow-down-1-9', label: 'Arrow down 1 9 (solid)', style: 'solid' },
|
||||
{ id: 'sort-down', label: 'Sort Down (Descending) (solid)', style: 'solid' },
|
||||
{ id: 'sort-up', label: 'Sort Up (Ascending) (solid)', style: 'solid' },
|
||||
{ id: 'arrow-down-wide-short', label: 'Arrow down wide short (solid)', style: 'solid' },
|
||||
{ id: 'arrow-down-short-wide', label: 'Arrow down short wide (solid)', style: 'solid' },
|
||||
{ id: 'arrow-down-z-a', label: 'Arrow down z a (solid)', style: 'solid' },
|
||||
{ id: 'arrow-down-a-z', label: 'Arrow down a z (solid)', style: 'solid' },
|
||||
{ id: 'futbol', label: 'Futbol ball (solid)', style: 'solid' },
|
||||
{ id: 'snowflake', label: 'Snowflake (solid)', style: 'solid' },
|
||||
{ id: 'face-smile', label: 'Face Smile (solid)', style: 'solid' },
|
||||
{ id: 'hands', label: 'Hands (solid)', style: 'solid' },
|
||||
{ id: 'right-from-bracket', label: 'Right from bracket (solid)', style: 'solid' },
|
||||
{ id: 'right-to-bracket', label: 'Right to bracket (solid)', style: 'solid' },
|
||||
{ id: 'share-from-square', label: 'Share from square (solid)', style: 'solid' },
|
||||
{ id: 'paper-plane', label: 'Paper Plane (solid)', style: 'solid' },
|
||||
{ id: 'floppy-disk', label: 'Floppy Disk (solid)', style: 'solid' },
|
||||
{ id: 'safari', label: 'Safari (brands)', style: 'brands' },
|
||||
{ id: 'bath', label: 'Bath (solid)', style: 'solid' },
|
||||
{ id: 'arrow-rotate-right', label: 'Arrow Rotate Right (solid)', style: 'solid' },
|
||||
{ id: 'arrow-rotate-left', label: 'Arrow Rotate Left (solid)', style: 'solid' },
|
||||
{ id: 'bars', label: 'Bars (solid)', style: 'solid' },
|
||||
{ id: 'xmark', label: 'X Mark (solid)', style: 'solid' },
|
||||
{ id: 'registered', label: 'Registered Trademark (solid)', style: 'solid' },
|
||||
{ id: 'arrows-rotate', label: 'Arrows rotate (solid)', style: 'solid' },
|
||||
{ id: 'circle-question', label: 'Circle question (solid)', style: 'solid' },
|
||||
{ id: 'square-plus', label: 'Square plus (solid)', style: 'solid' },
|
||||
{ id: 'circle-play', label: 'Circle play (solid)', style: 'solid' },
|
||||
{ id: 'chart-pie', label: 'Pie Chart (solid)', style: 'solid' },
|
||||
{ id: 'image', label: 'Image (solid)', style: 'solid' },
|
||||
{ id: 'pen-to-square', label: 'Pen to square (solid)', style: 'solid' },
|
||||
{ id: 'square-pen', label: 'Square pen (solid)', style: 'solid' },
|
||||
{ id: 'circle-pause', label: 'Circle pause (solid)', style: 'solid' },
|
||||
{ id: 'opera', label: 'Opera (brands)', style: 'brands' },
|
||||
{ id: 'openid', label: 'OpenID (brands)', style: 'brands' },
|
||||
{ id: 'object-ungroup', label: 'Object Ungroup (solid)', style: 'solid' },
|
||||
{ id: 'object-group', label: 'Object Group (solid)', style: 'solid' },
|
||||
{ id: 'newspaper', label: 'Newspaper (solid)', style: 'solid' },
|
||||
{ id: 'graduation-cap', label: 'Graduation Cap (solid)', style: 'solid' },
|
||||
{ id: 'moon', label: 'Moon (solid)', style: 'solid' },
|
||||
{ id: 'money-bill-1', label: 'Money bill 1 (solid)', style: 'solid' },
|
||||
{ id: 'mobile-screen-button', label: 'Mobile screen button (solid)', style: 'solid' },
|
||||
{ id: 'square-minus', label: 'Square minus (solid)', style: 'solid' },
|
||||
{ id: 'face-meh', label: 'Face meh (solid)', style: 'solid' },
|
||||
{ id: 'map', label: 'Map (solid)', style: 'solid' },
|
||||
{ id: 'location-dot', label: 'Location dot (solid)', style: 'solid' },
|
||||
{ id: 'reply-all', label: 'reply-all (solid)', style: 'solid' },
|
||||
{ id: 'reply', label: 'Reply (solid)', style: 'solid' },
|
||||
{ id: 'share', label: 'Share (solid)', style: 'solid' },
|
||||
{ id: 'wand-magic-sparkles', label: 'Wand magic sparkles (solid)', style: 'solid' },
|
||||
{ id: 'up-long', label: 'Up long (solid)', style: 'solid' },
|
||||
{ id: 'right-long', label: 'Right long (solid)', style: 'solid' },
|
||||
{ id: 'left-long', label: 'Left long (solid)', style: 'solid' },
|
||||
{ id: 'down-long', label: 'Down long (solid)', style: 'solid' },
|
||||
{ id: 'rectangle-list', label: 'Rectangle list (solid)', style: 'solid' },
|
||||
{ id: 'chart-line', label: 'Line Chart (solid)', style: 'solid' },
|
||||
{ id: 'lightbulb', label: 'Lightbulb (solid)', style: 'solid' },
|
||||
{ id: 'turn-up', label: 'Turn up (solid)', style: 'solid' },
|
||||
{ id: 'turn-down', label: 'Turn down (solid)', style: 'solid' },
|
||||
{ id: 'lemon', label: 'Lemon (solid)', style: 'solid' },
|
||||
{ id: 'gavel', label: 'Gavel (solid)', style: 'solid' },
|
||||
{ id: 'keyboard', label: 'Keyboard (solid)', style: 'solid' },
|
||||
{ id: 'building-columns', label: 'Building with Columns (solid)', style: 'solid' },
|
||||
{ id: 'id-card', label: 'Identification Card (solid)', style: 'solid' },
|
||||
{ id: 'id-badge', label: 'Identification Badge (solid)', style: 'solid' },
|
||||
{ id: 'hourglass', label: 'Hourglass (solid)', style: 'solid' },
|
||||
{ id: 'hourglass-end', label: 'Hourglass End (solid)', style: 'solid' },
|
||||
{ id: 'hourglass-half', label: 'Hourglass Half (solid)', style: 'solid' },
|
||||
{ id: 'hourglass-start', label: 'Hourglass Start (solid)', style: 'solid' },
|
||||
{ id: 'bed', label: 'Bed (solid)', style: 'solid' },
|
||||
{ id: 'hospital', label: 'hospital (solid)', style: 'solid' },
|
||||
{ id: 'house', label: 'House (solid)', style: 'solid' },
|
||||
{ id: 'heart', label: 'Heart (solid)', style: 'solid' },
|
||||
{ id: 'heading', label: 'heading (solid)', style: 'solid' },
|
||||
{ id: 'hard-drive', label: 'Hard drive (solid)', style: 'solid' },
|
||||
{ id: 'ear-deaf', label: 'Ear deaf (solid)', style: 'solid' },
|
||||
{ id: 'handshake', label: 'Handshake (solid)', style: 'solid' },
|
||||
{ id: 'hand', label: 'Paper (Hand) (solid)', style: 'solid' },
|
||||
{ id: 'hand-spock', label: 'Spock (Hand) (solid)', style: 'solid' },
|
||||
{ id: 'hand-scissors', label: 'Scissors (Hand) (solid)', style: 'solid' },
|
||||
{ id: 'hand-back-fist', label: 'Rock (Hand) (solid)', style: 'solid' },
|
||||
{ id: 'hand-pointer', label: 'Pointer (Hand) (solid)', style: 'solid' },
|
||||
{ id: 'hand-peace', label: 'Peace (Hand) (solid)', style: 'solid' },
|
||||
{ id: 'hand-point-up', label: 'Hand Pointing Up (solid)', style: 'solid' },
|
||||
{ id: 'hand-point-right', label: 'Hand Pointing Right (solid)', style: 'solid' },
|
||||
{ id: 'hand-point-left', label: 'Hand Pointing Left (solid)', style: 'solid' },
|
||||
{ id: 'hand-point-down', label: 'Hand Pointing Down (solid)', style: 'solid' },
|
||||
{ id: 'hand-lizard', label: 'Lizard (Hand) (solid)', style: 'solid' },
|
||||
{ id: 'users', label: 'Users (solid)', style: 'solid' },
|
||||
{ id: 'gears', label: 'Gears (solid)', style: 'solid' },
|
||||
{ id: 'gear', label: 'Gear (solid)', style: 'solid' },
|
||||
{ id: 'face-frown', label: 'Face frown (solid)', style: 'solid' },
|
||||
{ id: 'font-awesome', label: 'Font Awesome (brands)', style: 'brands' },
|
||||
{ id: 'folder-open', label: 'Folder Open (solid)', style: 'solid' },
|
||||
{ id: 'folder', label: 'Folder (solid)', style: 'solid' },
|
||||
{ id: 'bolt', label: 'Bolt (solid)', style: 'solid' },
|
||||
{ id: 'flag', label: 'flag (solid)', style: 'solid' },
|
||||
{ id: 'firefox', label: 'Firefox (brands)', style: 'brands' },
|
||||
{ id: 'copy', label: 'Copy (solid)', style: 'solid' },
|
||||
{ id: 'file-zipper', label: 'File zipper (solid)', style: 'solid' },
|
||||
{ id: 'file-video', label: 'Video File (solid)', style: 'solid' },
|
||||
{ id: 'file-lines', label: 'File lines (solid)', style: 'solid' },
|
||||
{ id: 'file-audio', label: 'Audio File (solid)', style: 'solid' },
|
||||
{ id: 'file-image', label: 'Image File (solid)', style: 'solid' },
|
||||
{ id: 'file', label: 'File (solid)', style: 'solid' },
|
||||
{ id: 'file-code', label: 'Code File (solid)', style: 'solid' },
|
||||
{ id: 'eye-dropper', label: 'Eye Dropper (solid)', style: 'solid' },
|
||||
{ id: 'eye-slash', label: 'Eye Slash (solid)', style: 'solid' },
|
||||
{ id: 'eye', label: 'Eye (solid)', style: 'solid' },
|
||||
{ id: 'square-up-right', label: 'Square up right (solid)', style: 'solid' },
|
||||
{ id: 'up-right-from-square', label: 'Up right from square (solid)', style: 'solid' },
|
||||
{ id: 'up-right-and-down-left-from-center', label: 'Up right and down left from center (solid)', style: 'solid' },
|
||||
{ id: 'right-left', label: 'Right left (solid)', style: 'solid' },
|
||||
{ id: 'envelope-open', label: 'Envelope Open (solid)', style: 'solid' },
|
||||
{ id: 'envelope', label: 'Envelope (solid)', style: 'solid' },
|
||||
{ id: 'edge', label: 'Edge Browser (brands)', style: 'brands' },
|
||||
{ id: 'circle-dot', label: 'Circle dot (solid)', style: 'solid' },
|
||||
{ id: 'gem', label: 'Gem (solid)', style: 'solid' },
|
||||
{ id: 'outdent', label: 'Outdent (solid)', style: 'solid' },
|
||||
{ id: 'utensils', label: 'Utensils (solid)', style: 'solid' },
|
||||
{ id: 'scissors', label: 'Scissors (solid)', style: 'solid' },
|
||||
{ id: 'credit-card', label: 'Credit Card (solid)', style: 'solid' },
|
||||
{ id: 'creative-commons', label: 'Creative Commons (brands)', style: 'brands' },
|
||||
{ id: 'copyright', label: 'Copyright (solid)', style: 'solid' },
|
||||
{ id: 'down-left-and-up-right-to-center', label: 'Down left and up right to center (solid)', style: 'solid' },
|
||||
{ id: 'compass', label: 'Compass (solid)', style: 'solid' },
|
||||
{ id: 'comments', label: 'comments (solid)', style: 'solid' },
|
||||
{ id: 'comment-dots', label: 'Comment Dots (solid)', style: 'solid' },
|
||||
{ id: 'comment', label: 'comment (solid)', style: 'solid' },
|
||||
{ id: 'code-branch', label: 'Code Branch (solid)', style: 'solid' },
|
||||
{ id: 'cloud-arrow-up', label: 'Cloud arrow up (solid)', style: 'solid' },
|
||||
{ id: 'cloud-arrow-down', label: 'Cloud arrow down (solid)', style: 'solid' },
|
||||
{ id: 'clone', label: 'Clone (solid)', style: 'solid' },
|
||||
{ id: 'clock', label: 'Clock (solid)', style: 'solid' },
|
||||
{ id: 'paste', label: 'Paste (solid)', style: 'solid' },
|
||||
{ id: 'circle', label: 'Circle (solid)', style: 'solid' },
|
||||
{ id: 'circle-notch', label: 'Circle Notched (solid)', style: 'solid' },
|
||||
{ id: 'chrome', label: 'Chrome (brands)', style: 'brands' },
|
||||
{ id: 'square-check', label: 'Square check (solid)', style: 'solid' },
|
||||
{ id: 'circle-check', label: 'Circle check (solid)', style: 'solid' },
|
||||
{ id: 'link', label: 'Link (solid)', style: 'solid' },
|
||||
{ id: 'closed-captioning', label: 'Closed Captioning (solid)', style: 'solid' },
|
||||
{ id: 'calendar-xmark', label: 'Calendar X Mark (solid)', style: 'solid' },
|
||||
{ id: 'calendar-plus', label: 'Calendar Plus (solid)', style: 'solid' },
|
||||
{ id: 'calendar', label: 'Calendar (solid)', style: 'solid' },
|
||||
{ id: 'calendar-minus', label: 'Calendar Minus (solid)', style: 'solid' },
|
||||
{ id: 'calendar-check', label: 'Calendar Check (solid)', style: 'solid' },
|
||||
{ id: 'calendar-days', label: 'Calendar Days (solid)', style: 'solid' },
|
||||
{ id: 'taxi', label: 'Taxi (solid)', style: 'solid' },
|
||||
{ id: 'building', label: 'Building (solid)', style: 'solid' },
|
||||
{ id: 'bookmark', label: 'bookmark (solid)', style: 'solid' },
|
||||
{ id: 'bluetooth', label: 'Bluetooth (brands)', style: 'brands' },
|
||||
{ id: 'bell-slash', label: 'Bell Slash (solid)', style: 'solid' },
|
||||
{ id: 'bell', label: 'bell (solid)', style: 'solid' },
|
||||
{ id: 'battery-full', label: 'Battery Full (solid)', style: 'solid' },
|
||||
{ id: 'battery-three-quarters', label: 'Battery 3/4 Full (solid)', style: 'solid' },
|
||||
{ id: 'battery-half', label: 'Battery 1/2 Full (solid)', style: 'solid' },
|
||||
{ id: 'battery-quarter', label: 'Battery 1/4 Full (solid)', style: 'solid' },
|
||||
{ id: 'battery-empty', label: 'Battery Empty (solid)', style: 'solid' },
|
||||
{ id: 'chart-column', label: 'Chart Column (solid)', style: 'solid' },
|
||||
{ id: 'car', label: 'Car (solid)', style: 'solid' },
|
||||
{ id: 'hands-asl-interpreting', label: 'Hands american sign language interpreting (solid)', style: 'solid' },
|
||||
{ id: 'up-down', label: 'Up down (solid)', style: 'solid' },
|
||||
{ id: 'left-right', label: 'Left right (solid)', style: 'solid' },
|
||||
{ id: 'maximize', label: 'Maximize (solid)', style: 'solid' },
|
||||
{ id: 'up-down-left-right', label: 'Up down left right (solid)', style: 'solid' },
|
||||
{ id: 'circle-up', label: 'Circle up (solid)', style: 'solid' },
|
||||
{ id: 'circle-right', label: 'Circle right (solid)', style: 'solid' },
|
||||
{ id: 'circle-left', label: 'Circle left (solid)', style: 'solid' },
|
||||
{ id: 'circle-down', label: 'Circle down (solid)', style: 'solid' },
|
||||
{ id: 'chart-area', label: 'Area Chart (solid)', style: 'solid' },
|
||||
{ id: 'apple', label: 'Apple (brands)', style: 'brands' },
|
||||
{ id: 'android', label: 'Android (brands)', style: 'brands' },
|
||||
{ id: 'address-book', label: 'Address Book (solid)', style: 'solid' },
|
||||
];
|
||||
iconSelect.init = function (el, onModified) {
|
||||
onModified = onModified || function () {};
|
||||
const doubleSize = el.hasClass('fa-2x');
|
||||
let selected = el.attr('class').replace('fa-2x', '').replace('fa', '').replace(/\s+/g, '');
|
||||
let selected = el.attr('class')
|
||||
.replace(/fa-(solid|regular|brands|light|thin|duotone|nodebb) /, '')
|
||||
.replace('fa-2x', '')
|
||||
.replace('fa', '')
|
||||
.replace(/\s+/g, '');
|
||||
|
||||
$('#icons .selected').removeClass('selected');
|
||||
|
||||
@@ -19,9 +239,8 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) {
|
||||
}
|
||||
}
|
||||
|
||||
Benchpress.render('partials/fontawesome', {}).then(function (html) {
|
||||
Benchpress.render('partials/fontawesome', { icons: initialIcons }).then(function (html) {
|
||||
html = $(html);
|
||||
html.find('.nbb-fa-icons').prepend($('<i class="fa fa-nbb-none"></i>'));
|
||||
|
||||
const picker = bootbox.dialog({
|
||||
onEscape: true,
|
||||
@@ -35,7 +254,7 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) {
|
||||
label: 'No Icon',
|
||||
className: 'btn-default',
|
||||
callback: function () {
|
||||
el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : ''));
|
||||
el.attr('class', 'fa fa-xl');
|
||||
el.val('');
|
||||
el.attr('value', '');
|
||||
|
||||
@@ -47,12 +266,16 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) {
|
||||
className: 'btn-primary',
|
||||
callback: function () {
|
||||
const iconClass = $('.bootbox .selected').attr('class') || `fa fa-${$('.bootbox #fa-filter').val()}`;
|
||||
const categoryIconClass = $('<div></div>').addClass(iconClass).removeClass('fa').removeClass('selected')
|
||||
const categoryIconClass = $('<div></div>')
|
||||
.addClass(iconClass)
|
||||
.removeClass('fa')
|
||||
.removeClass('selected')
|
||||
.removeClass('fa-xl')
|
||||
.attr('class');
|
||||
const searchElVal = picker.find('input').val();
|
||||
|
||||
if (categoryIconClass) {
|
||||
el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : '') + categoryIconClass);
|
||||
el.attr('class', 'fa fa-2x ' + categoryIconClass);
|
||||
el.val(categoryIconClass);
|
||||
el.attr('value', categoryIconClass);
|
||||
} else if (searchElVal) {
|
||||
@@ -73,15 +296,17 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) {
|
||||
|
||||
if (selected) {
|
||||
modalEl.find('.' + selected).addClass('selected');
|
||||
searchEl.val(selected.replace('fa-', ''));
|
||||
searchEl.val(selected.replace(/fa-(solid|regular|brands|light|thin|duotone|nodebb) /, '').replace('fa-xl', '').replace('fa-', ''));
|
||||
}
|
||||
}).modal('show');
|
||||
|
||||
picker.on('shown.bs.modal', function () {
|
||||
const modalEl = $(this);
|
||||
const searchEl = modalEl.find('input');
|
||||
const icons = modalEl.find('.nbb-fa-icons i');
|
||||
const iconContainer = modalEl.find('.nbb-fa-icons');
|
||||
let icons = modalEl.find('.nbb-fa-icons i');
|
||||
const submitEl = modalEl.find('button.btn-primary');
|
||||
let lastSearch = '';
|
||||
|
||||
function changeSelection(newSelection) {
|
||||
modalEl.find('i.selected').removeClass('selected');
|
||||
@@ -100,27 +325,72 @@ define('iconSelect', ['benchpress', 'bootbox'], function (Benchpress, bootbox) {
|
||||
searchEl.selectRange(0, searchEl.val().length);
|
||||
|
||||
modalEl.find('.icon-container').on('click', 'i', function () {
|
||||
searchEl.val($(this).attr('class').replace('fa fa-', '').replace('selected', ''));
|
||||
searchEl.val($(this).attr('class')
|
||||
.replace(/fa-(solid|regular|brands|light|thin|duotone|nodebb) /, '')
|
||||
.replace('fa fa-xl fa-', '')
|
||||
.replace('selected', ''));
|
||||
changeSelection($(this));
|
||||
});
|
||||
|
||||
searchEl.on('keyup', function (e) {
|
||||
if (e.keyCode !== 13) {
|
||||
// Filter
|
||||
icons.show();
|
||||
icons.each(function (idx, el) {
|
||||
if (!el.className.match(new RegExp('^fa fa-.*' + searchEl.val() + '.*$'))) {
|
||||
$(el).hide();
|
||||
}
|
||||
});
|
||||
changeSelection();
|
||||
const debouncedSearch = utils.debounce(async () => {
|
||||
// Search
|
||||
let iconData;
|
||||
if (lastSearch.length) {
|
||||
iconData = await iconSelect.findIcons(lastSearch);
|
||||
} else {
|
||||
submitEl.click();
|
||||
iconData = initialIcons;
|
||||
}
|
||||
icons.remove();
|
||||
iconData.forEach((iconData) => {
|
||||
iconContainer.append($(`<i class="fa fa-xl fa-${iconData.style} fa-${iconData.id}" data-label="${iconData.label}"></i>`));
|
||||
});
|
||||
icons = modalEl.find('.nbb-fa-icons i');
|
||||
changeSelection();
|
||||
}, 200);
|
||||
searchEl.on('keyup', function (e) {
|
||||
if (e.code !== 'Enter' && searchEl.val() !== lastSearch) {
|
||||
lastSearch = searchEl.val();
|
||||
debouncedSearch();
|
||||
} else if (e.code === 'Enter') {
|
||||
submitEl.trigger('click');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
iconSelect.findIcons = async function (searchString) {
|
||||
const request = await fetch('https://api.fontawesome.com', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: `query {
|
||||
search(version: "6.2.0", query: "${searchString}", first: 200) {
|
||||
id,
|
||||
label,
|
||||
familyStylesByLicense {
|
||||
free {
|
||||
style
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
}),
|
||||
});
|
||||
const response = await request.json();
|
||||
const icons = response.data.search.filter(icon => icon.familyStylesByLicense.free.length > 0).flatMap((icon) => {
|
||||
const result = [];
|
||||
icon.familyStylesByLicense.free.forEach((style) => {
|
||||
result.push({
|
||||
id: icon.id,
|
||||
label: `${icon.label} (${style.style})`,
|
||||
style: style.style,
|
||||
});
|
||||
});
|
||||
return result;
|
||||
});
|
||||
return icons;
|
||||
};
|
||||
|
||||
return iconSelect;
|
||||
});
|
||||
|
||||
@@ -1,796 +1,12 @@
|
||||
<div class="icon-container">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="fa-filter">Type to filter icons</label>
|
||||
<label class="form-label" for="fa-filter">Type to search for icons</label>
|
||||
<input type="text" class="form-control" id="fa-filter" data-action="filter" placeholder="e.g. umbrella" />
|
||||
</div>
|
||||
<div class="d-flex nbb-fa-icons flex-wrap">
|
||||
<i class="fa fa-500px"></i>
|
||||
<i class="fa fa-address-book"></i>
|
||||
<i class="fa fa-address-book-o"></i>
|
||||
<i class="fa fa-address-card"></i>
|
||||
<i class="fa fa-address-card-o"></i>
|
||||
<i class="fa fa-adjust"></i>
|
||||
<i class="fa fa-adn"></i>
|
||||
<i class="fa fa-align-center"></i>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<i class="fa fa-align-left"></i>
|
||||
<i class="fa fa-align-right"></i>
|
||||
<i class="fa fa-amazon"></i>
|
||||
<i class="fa fa-ambulance"></i>
|
||||
<i class="fa fa-american-sign-language-interpreting"></i>
|
||||
<i class="fa fa-anchor"></i>
|
||||
<i class="fa fa-android"></i>
|
||||
<i class="fa fa-angellist"></i>
|
||||
<i class="fa fa-angle-double-down"></i>
|
||||
<i class="fa fa-angle-double-left"></i>
|
||||
<i class="fa fa-angle-double-right"></i>
|
||||
<i class="fa fa-angle-double-up"></i>
|
||||
<i class="fa fa-angle-down"></i>
|
||||
<i class="fa fa-angle-left"></i>
|
||||
<i class="fa fa-angle-right"></i>
|
||||
<i class="fa fa-angle-up"></i>
|
||||
<i class="fa fa-apple"></i>
|
||||
<i class="fa fa-archive"></i>
|
||||
<i class="fa fa-area-chart"></i>
|
||||
<i class="fa fa-arrow-circle-down"></i>
|
||||
<i class="fa fa-arrow-circle-left"></i>
|
||||
<i class="fa fa-arrow-circle-o-down"></i>
|
||||
<i class="fa fa-arrow-circle-o-left"></i>
|
||||
<i class="fa fa-arrow-circle-o-right"></i>
|
||||
<i class="fa fa-arrow-circle-o-up"></i>
|
||||
<i class="fa fa-arrow-circle-right"></i>
|
||||
<i class="fa fa-arrow-circle-up"></i>
|
||||
<i class="fa fa-arrow-down"></i>
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
<i class="fa fa-arrows"></i>
|
||||
<i class="fa fa-arrows-alt"></i>
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
<i class="fa fa-arrows-v"></i>
|
||||
<i class="fa fa-asl-interpreting"></i>
|
||||
<i class="fa fa-assistive-listening-systems"></i>
|
||||
<i class="fa fa-asterisk"></i>
|
||||
<i class="fa fa-at"></i>
|
||||
<i class="fa fa-audio-description"></i>
|
||||
<i class="fa fa-automobile"></i>
|
||||
<i class="fa fa-backward"></i>
|
||||
<i class="fa fa-balance-scale"></i>
|
||||
<i class="fa fa-ban"></i>
|
||||
<i class="fa fa-bandcamp"></i>
|
||||
<i class="fa fa-bank"></i>
|
||||
<i class="fa fa-bar-chart"></i>
|
||||
<i class="fa fa-bar-chart-o"></i>
|
||||
<i class="fa fa-barcode"></i>
|
||||
<i class="fa fa-bars"></i>
|
||||
<i class="fa fa-bath"></i>
|
||||
<i class="fa fa-bathtub"></i>
|
||||
<i class="fa fa-battery"></i>
|
||||
<i class="fa fa-battery-0"></i>
|
||||
<i class="fa fa-battery-1"></i>
|
||||
<i class="fa fa-battery-2"></i>
|
||||
<i class="fa fa-battery-3"></i>
|
||||
<i class="fa fa-battery-4"></i>
|
||||
<i class="fa fa-battery-empty"></i>
|
||||
<i class="fa fa-battery-full"></i>
|
||||
<i class="fa fa-battery-half"></i>
|
||||
<i class="fa fa-battery-quarter"></i>
|
||||
<i class="fa fa-battery-three-quarters"></i>
|
||||
<i class="fa fa-bed"></i>
|
||||
<i class="fa fa-beer"></i>
|
||||
<i class="fa fa-behance"></i>
|
||||
<i class="fa fa-behance-square"></i>
|
||||
<i class="fa fa-bell"></i>
|
||||
<i class="fa fa-bell-o"></i>
|
||||
<i class="fa fa-bell-slash"></i>
|
||||
<i class="fa fa-bell-slash-o"></i>
|
||||
<i class="fa fa-bicycle"></i>
|
||||
<i class="fa fa-binoculars"></i>
|
||||
<i class="fa fa-birthday-cake"></i>
|
||||
<i class="fa fa-bitbucket"></i>
|
||||
<i class="fa fa-bitbucket-square"></i>
|
||||
<i class="fa fa-bitcoin"></i>
|
||||
<i class="fa fa-black-tie"></i>
|
||||
<i class="fa fa-blind"></i>
|
||||
<i class="fa fa-bluetooth"></i>
|
||||
<i class="fa fa-bluetooth-b"></i>
|
||||
<i class="fa fa-bold"></i>
|
||||
<i class="fa fa-bolt"></i>
|
||||
<i class="fa fa-bomb"></i>
|
||||
<i class="fa fa-book"></i>
|
||||
<i class="fa fa-bookmark"></i>
|
||||
<i class="fa fa-bookmark-o"></i>
|
||||
<i class="fa fa-braille"></i>
|
||||
<i class="fa fa-briefcase"></i>
|
||||
<i class="fa fa-btc"></i>
|
||||
<i class="fa fa-bug"></i>
|
||||
<i class="fa fa-building"></i>
|
||||
<i class="fa fa-building-o"></i>
|
||||
<i class="fa fa-bullhorn"></i>
|
||||
<i class="fa fa-bullseye"></i>
|
||||
<i class="fa fa-bus"></i>
|
||||
<i class="fa fa-buysellads"></i>
|
||||
<i class="fa fa-cab"></i>
|
||||
<i class="fa fa-calculator"></i>
|
||||
<i class="fa fa-calendar"></i>
|
||||
<i class="fa fa-calendar-check-o"></i>
|
||||
<i class="fa fa-calendar-minus-o"></i>
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<i class="fa fa-calendar-plus-o"></i>
|
||||
<i class="fa fa-calendar-times-o"></i>
|
||||
<i class="fa fa-camera"></i>
|
||||
<i class="fa fa-camera-retro"></i>
|
||||
<i class="fa fa-car"></i>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
<i class="fa fa-caret-left"></i>
|
||||
<i class="fa fa-caret-right"></i>
|
||||
<i class="fa fa-caret-square-o-down"></i>
|
||||
<i class="fa fa-caret-square-o-left"></i>
|
||||
<i class="fa fa-caret-square-o-right"></i>
|
||||
<i class="fa fa-caret-square-o-up"></i>
|
||||
<i class="fa fa-caret-up"></i>
|
||||
<i class="fa fa-cart-arrow-down"></i>
|
||||
<i class="fa fa-cart-plus"></i>
|
||||
<i class="fa fa-cc"></i>
|
||||
<i class="fa fa-cc-amex"></i>
|
||||
<i class="fa fa-cc-diners-club"></i>
|
||||
<i class="fa fa-cc-discover"></i>
|
||||
<i class="fa fa-cc-jcb"></i>
|
||||
<i class="fa fa-cc-mastercard"></i>
|
||||
<i class="fa fa-cc-paypal"></i>
|
||||
<i class="fa fa-cc-stripe"></i>
|
||||
<i class="fa fa-cc-visa"></i>
|
||||
<i class="fa fa-certificate"></i>
|
||||
<i class="fa fa-chain"></i>
|
||||
<i class="fa fa-chain-broken"></i>
|
||||
<i class="fa fa-check"></i>
|
||||
<i class="fa fa-check-circle"></i>
|
||||
<i class="fa fa-check-circle-o"></i>
|
||||
<i class="fa fa-check-square"></i>
|
||||
<i class="fa fa-check-square-o"></i>
|
||||
<i class="fa fa-chevron-circle-down"></i>
|
||||
<i class="fa fa-chevron-circle-left"></i>
|
||||
<i class="fa fa-chevron-circle-right"></i>
|
||||
<i class="fa fa-chevron-circle-up"></i>
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
<i class="fa fa-child"></i>
|
||||
<i class="fa fa-chrome"></i>
|
||||
<i class="fa fa-circle"></i>
|
||||
<i class="fa fa-circle-o"></i>
|
||||
<i class="fa fa-circle-o-notch"></i>
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
<i class="fa fa-clipboard"></i>
|
||||
<i class="fa fa-clock-o"></i>
|
||||
<i class="fa fa-clone"></i>
|
||||
<i class="fa fa-close"></i>
|
||||
<i class="fa fa-cloud"></i>
|
||||
<i class="fa fa-cloud-download"></i>
|
||||
<i class="fa fa-cloud-upload"></i>
|
||||
<i class="fa fa-cny"></i>
|
||||
<i class="fa fa-code"></i>
|
||||
<i class="fa fa-code-fork"></i>
|
||||
<i class="fa fa-codepen"></i>
|
||||
<i class="fa fa-codiepie"></i>
|
||||
<i class="fa fa-coffee"></i>
|
||||
<i class="fa fa-cog"></i>
|
||||
<i class="fa fa-cogs"></i>
|
||||
<i class="fa fa-columns"></i>
|
||||
<i class="fa fa-comment"></i>
|
||||
<i class="fa fa-comment-o"></i>
|
||||
<i class="fa fa-commenting"></i>
|
||||
<i class="fa fa-commenting-o"></i>
|
||||
<i class="fa fa-comments"></i>
|
||||
<i class="fa fa-comments-o"></i>
|
||||
<i class="fa fa-compass"></i>
|
||||
<i class="fa fa-compress"></i>
|
||||
<i class="fa fa-connectdevelop"></i>
|
||||
<i class="fa fa-contao"></i>
|
||||
<i class="fa fa-copy"></i>
|
||||
<i class="fa fa-copyright"></i>
|
||||
<i class="fa fa-creative-commons"></i>
|
||||
<i class="fa fa-credit-card"></i>
|
||||
<i class="fa fa-credit-card-alt"></i>
|
||||
<i class="fa fa-crop"></i>
|
||||
<i class="fa fa-crosshairs"></i>
|
||||
<i class="fa fa-css3"></i>
|
||||
<i class="fa fa-cube"></i>
|
||||
<i class="fa fa-cubes"></i>
|
||||
<i class="fa fa-cut"></i>
|
||||
<i class="fa fa-cutlery"></i>
|
||||
<i class="fa fa-dashboard"></i>
|
||||
<i class="fa fa-dashcube"></i>
|
||||
<i class="fa fa-database"></i>
|
||||
<i class="fa fa-deaf"></i>
|
||||
<i class="fa fa-deafness"></i>
|
||||
<i class="fa fa-dedent"></i>
|
||||
<i class="fa fa-delicious"></i>
|
||||
<i class="fa fa-desktop"></i>
|
||||
<i class="fa fa-deviantart"></i>
|
||||
<i class="fa fa-diamond"></i>
|
||||
<i class="fa fa-digg"></i>
|
||||
<i class="fa fa-dollar"></i>
|
||||
<i class="fa fa-dot-circle-o"></i>
|
||||
<i class="fa fa-download"></i>
|
||||
<i class="fa fa-dribbble"></i>
|
||||
<i class="fa fa-drivers-license"></i>
|
||||
<i class="fa fa-drivers-license-o"></i>
|
||||
<i class="fa fa-dropbox"></i>
|
||||
<i class="fa fa-drupal"></i>
|
||||
<i class="fa fa-edge"></i>
|
||||
<i class="fa fa-edit"></i>
|
||||
<i class="fa fa-eercast"></i>
|
||||
<i class="fa fa-eject"></i>
|
||||
<i class="fa fa-ellipsis-h"></i>
|
||||
<i class="fa fa-ellipsis-v"></i>
|
||||
<i class="fa fa-empire"></i>
|
||||
<i class="fa fa-envelope"></i>
|
||||
<i class="fa fa-envelope-o"></i>
|
||||
<i class="fa fa-envelope-open"></i>
|
||||
<i class="fa fa-envelope-open-o"></i>
|
||||
<i class="fa fa-envelope-square"></i>
|
||||
<i class="fa fa-envira"></i>
|
||||
<i class="fa fa-eraser"></i>
|
||||
<i class="fa fa-etsy"></i>
|
||||
<i class="fa fa-eur"></i>
|
||||
<i class="fa fa-euro"></i>
|
||||
<i class="fa fa-exchange"></i>
|
||||
<i class="fa fa-exclamation"></i>
|
||||
<i class="fa fa-exclamation-circle"></i>
|
||||
<i class="fa fa-exclamation-triangle"></i>
|
||||
<i class="fa fa-expand"></i>
|
||||
<i class="fa fa-expeditedssl"></i>
|
||||
<i class="fa fa-external-link"></i>
|
||||
<i class="fa fa-external-link-square"></i>
|
||||
<i class="fa fa-eye"></i>
|
||||
<i class="fa fa-eye-slash"></i>
|
||||
<i class="fa fa-eyedropper"></i>
|
||||
<i class="fa fa-fa"></i>
|
||||
<i class="fa fa-facebook"></i>
|
||||
<i class="fa fa-facebook-f"></i>
|
||||
<i class="fa fa-facebook-official"></i>
|
||||
<i class="fa fa-facebook-square"></i>
|
||||
<i class="fa fa-fast-backward"></i>
|
||||
<i class="fa fa-fast-forward"></i>
|
||||
<i class="fa fa-fax"></i>
|
||||
<i class="fa fa-feed"></i>
|
||||
<i class="fa fa-female"></i>
|
||||
<i class="fa fa-fighter-jet"></i>
|
||||
<i class="fa fa-file"></i>
|
||||
<i class="fa fa-file-archive-o"></i>
|
||||
<i class="fa fa-file-audio-o"></i>
|
||||
<i class="fa fa-file-code-o"></i>
|
||||
<i class="fa fa-file-excel-o"></i>
|
||||
<i class="fa fa-file-image-o"></i>
|
||||
<i class="fa fa-file-movie-o"></i>
|
||||
<i class="fa fa-file-o"></i>
|
||||
<i class="fa fa-file-pdf-o"></i>
|
||||
<i class="fa fa-file-photo-o"></i>
|
||||
<i class="fa fa-file-picture-o"></i>
|
||||
<i class="fa fa-file-powerpoint-o"></i>
|
||||
<i class="fa fa-file-sound-o"></i>
|
||||
<i class="fa fa-file-text"></i>
|
||||
<i class="fa fa-file-text-o"></i>
|
||||
<i class="fa fa-file-video-o"></i>
|
||||
<i class="fa fa-file-word-o"></i>
|
||||
<i class="fa fa-file-zip-o"></i>
|
||||
<i class="fa fa-files-o"></i>
|
||||
<i class="fa fa-film"></i>
|
||||
<i class="fa fa-filter"></i>
|
||||
<i class="fa fa-fire"></i>
|
||||
<i class="fa fa-fire-extinguisher"></i>
|
||||
<i class="fa fa-firefox"></i>
|
||||
<i class="fa fa-first-order"></i>
|
||||
<i class="fa fa-flag"></i>
|
||||
<i class="fa fa-flag-checkered"></i>
|
||||
<i class="fa fa-flag-o"></i>
|
||||
<i class="fa fa-flash"></i>
|
||||
<i class="fa fa-flask"></i>
|
||||
<i class="fa fa-flickr"></i>
|
||||
<i class="fa fa-floppy-o"></i>
|
||||
<i class="fa fa-folder"></i>
|
||||
<i class="fa fa-folder-o"></i>
|
||||
<i class="fa fa-folder-open"></i>
|
||||
<i class="fa fa-folder-open-o"></i>
|
||||
<i class="fa fa-font"></i>
|
||||
<i class="fa fa-font-awesome"></i>
|
||||
<i class="fa fa-fonticons"></i>
|
||||
<i class="fa fa-fort-awesome"></i>
|
||||
<i class="fa fa-forumbee"></i>
|
||||
<i class="fa fa-forward"></i>
|
||||
<i class="fa fa-foursquare"></i>
|
||||
<i class="fa fa-free-code-camp"></i>
|
||||
<i class="fa fa-frown-o"></i>
|
||||
<i class="fa fa-futbol-o"></i>
|
||||
<i class="fa fa-gamepad"></i>
|
||||
<i class="fa fa-gavel"></i>
|
||||
<i class="fa fa-gbp"></i>
|
||||
<i class="fa fa-ge"></i>
|
||||
<i class="fa fa-gear"></i>
|
||||
<i class="fa fa-gears"></i>
|
||||
<i class="fa fa-genderless"></i>
|
||||
<i class="fa fa-get-pocket"></i>
|
||||
<i class="fa fa-gg"></i>
|
||||
<i class="fa fa-gg-circle"></i>
|
||||
<i class="fa fa-gift"></i>
|
||||
<i class="fa fa-git"></i>
|
||||
<i class="fa fa-git-square"></i>
|
||||
<i class="fa fa-github"></i>
|
||||
<i class="fa fa-github-alt"></i>
|
||||
<i class="fa fa-github-square"></i>
|
||||
<i class="fa fa-gitlab"></i>
|
||||
<i class="fa fa-gittip"></i>
|
||||
<i class="fa fa-glass"></i>
|
||||
<i class="fa fa-glide"></i>
|
||||
<i class="fa fa-glide-g"></i>
|
||||
<i class="fa fa-globe"></i>
|
||||
<i class="fa fa-google"></i>
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<i class="fa fa-google-plus-circle"></i>
|
||||
<i class="fa fa-google-plus-official"></i>
|
||||
<i class="fa fa-google-plus-square"></i>
|
||||
<i class="fa fa-google-wallet"></i>
|
||||
<i class="fa fa-graduation-cap"></i>
|
||||
<i class="fa fa-gratipay"></i>
|
||||
<i class="fa fa-grav"></i>
|
||||
<i class="fa fa-group"></i>
|
||||
<i class="fa fa-h-square"></i>
|
||||
<i class="fa fa-hacker-news"></i>
|
||||
<i class="fa fa-hand-grab-o"></i>
|
||||
<i class="fa fa-hand-lizard-o"></i>
|
||||
<i class="fa fa-hand-o-down"></i>
|
||||
<i class="fa fa-hand-o-left"></i>
|
||||
<i class="fa fa-hand-o-right"></i>
|
||||
<i class="fa fa-hand-o-up"></i>
|
||||
<i class="fa fa-hand-paper-o"></i>
|
||||
<i class="fa fa-hand-peace-o"></i>
|
||||
<i class="fa fa-hand-pointer-o"></i>
|
||||
<i class="fa fa-hand-rock-o"></i>
|
||||
<i class="fa fa-hand-scissors-o"></i>
|
||||
<i class="fa fa-hand-spock-o"></i>
|
||||
<i class="fa fa-hand-stop-o"></i>
|
||||
<i class="fa fa-handshake-o"></i>
|
||||
<i class="fa fa-hard-of-hearing"></i>
|
||||
<i class="fa fa-hashtag"></i>
|
||||
<i class="fa fa-hdd-o"></i>
|
||||
<i class="fa fa-header"></i>
|
||||
<i class="fa fa-headphones"></i>
|
||||
<i class="fa fa-heart"></i>
|
||||
<i class="fa fa-heart-o"></i>
|
||||
<i class="fa fa-heartbeat"></i>
|
||||
<i class="fa fa-history"></i>
|
||||
<i class="fa fa-home"></i>
|
||||
<i class="fa fa-hospital-o"></i>
|
||||
<i class="fa fa-hotel"></i>
|
||||
<i class="fa fa-hourglass"></i>
|
||||
<i class="fa fa-hourglass-1"></i>
|
||||
<i class="fa fa-hourglass-2"></i>
|
||||
<i class="fa fa-hourglass-3"></i>
|
||||
<i class="fa fa-hourglass-end"></i>
|
||||
<i class="fa fa-hourglass-half"></i>
|
||||
<i class="fa fa-hourglass-o"></i>
|
||||
<i class="fa fa-hourglass-start"></i>
|
||||
<i class="fa fa-houzz"></i>
|
||||
<i class="fa fa-html5"></i>
|
||||
<i class="fa fa-i-cursor"></i>
|
||||
<i class="fa fa-id-badge"></i>
|
||||
<i class="fa fa-id-card"></i>
|
||||
<i class="fa fa-id-card-o"></i>
|
||||
<i class="fa fa-ils"></i>
|
||||
<i class="fa fa-image"></i>
|
||||
<i class="fa fa-imdb"></i>
|
||||
<i class="fa fa-inbox"></i>
|
||||
<i class="fa fa-indent"></i>
|
||||
<i class="fa fa-industry"></i>
|
||||
<i class="fa fa-info"></i>
|
||||
<i class="fa fa-info-circle"></i>
|
||||
<i class="fa fa-inr"></i>
|
||||
<i class="fa fa-instagram"></i>
|
||||
<i class="fa fa-institution"></i>
|
||||
<i class="fa fa-internet-explorer"></i>
|
||||
<i class="fa fa-intersex"></i>
|
||||
<i class="fa fa-ioxhost"></i>
|
||||
<i class="fa fa-italic"></i>
|
||||
<i class="fa fa-joomla"></i>
|
||||
<i class="fa fa-jpy"></i>
|
||||
<i class="fa fa-jsfiddle"></i>
|
||||
<i class="fa fa-key"></i>
|
||||
<i class="fa fa-keyboard-o"></i>
|
||||
<i class="fa fa-krw"></i>
|
||||
<i class="fa fa-language"></i>
|
||||
<i class="fa fa-laptop"></i>
|
||||
<i class="fa fa-lastfm"></i>
|
||||
<i class="fa fa-lastfm-square"></i>
|
||||
<i class="fa fa-leaf"></i>
|
||||
<i class="fa fa-leanpub"></i>
|
||||
<i class="fa fa-legal"></i>
|
||||
<i class="fa fa-lemon-o"></i>
|
||||
<i class="fa fa-level-down"></i>
|
||||
<i class="fa fa-level-up"></i>
|
||||
<i class="fa fa-life-bouy"></i>
|
||||
<i class="fa fa-life-buoy"></i>
|
||||
<i class="fa fa-life-ring"></i>
|
||||
<i class="fa fa-life-saver"></i>
|
||||
<i class="fa fa-lightbulb-o"></i>
|
||||
<i class="fa fa-line-chart"></i>
|
||||
<i class="fa fa-link"></i>
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<i class="fa fa-linkedin-square"></i>
|
||||
<i class="fa fa-linode"></i>
|
||||
<i class="fa fa-linux"></i>
|
||||
<i class="fa fa-list"></i>
|
||||
<i class="fa fa-list-alt"></i>
|
||||
<i class="fa fa-list-ol"></i>
|
||||
<i class="fa fa-list-ul"></i>
|
||||
<i class="fa fa-location-arrow"></i>
|
||||
<i class="fa fa-lock"></i>
|
||||
<i class="fa fa-long-arrow-down"></i>
|
||||
<i class="fa fa-long-arrow-left"></i>
|
||||
<i class="fa fa-long-arrow-right"></i>
|
||||
<i class="fa fa-long-arrow-up"></i>
|
||||
<i class="fa fa-low-vision"></i>
|
||||
<i class="fa fa-magic"></i>
|
||||
<i class="fa fa-magnet"></i>
|
||||
<i class="fa fa-mail-forward"></i>
|
||||
<i class="fa fa-mail-reply"></i>
|
||||
<i class="fa fa-mail-reply-all"></i>
|
||||
<i class="fa fa-male"></i>
|
||||
<i class="fa fa-map"></i>
|
||||
<i class="fa fa-map-marker"></i>
|
||||
<i class="fa fa-map-o"></i>
|
||||
<i class="fa fa-map-pin"></i>
|
||||
<i class="fa fa-map-signs"></i>
|
||||
<i class="fa fa-mars"></i>
|
||||
<i class="fa fa-mars-double"></i>
|
||||
<i class="fa fa-mars-stroke"></i>
|
||||
<i class="fa fa-mars-stroke-h"></i>
|
||||
<i class="fa fa-mars-stroke-v"></i>
|
||||
<i class="fa fa-maxcdn"></i>
|
||||
<i class="fa fa-meanpath"></i>
|
||||
<i class="fa fa-medium"></i>
|
||||
<i class="fa fa-medkit"></i>
|
||||
<i class="fa fa-meetup"></i>
|
||||
<i class="fa fa-meh-o"></i>
|
||||
<i class="fa fa-mercury"></i>
|
||||
<i class="fa fa-microchip"></i>
|
||||
<i class="fa fa-microphone"></i>
|
||||
<i class="fa fa-microphone-slash"></i>
|
||||
<i class="fa fa-minus"></i>
|
||||
<i class="fa fa-minus-circle"></i>
|
||||
<i class="fa fa-minus-square"></i>
|
||||
<i class="fa fa-minus-square-o"></i>
|
||||
<i class="fa fa-mixcloud"></i>
|
||||
<i class="fa fa-mobile"></i>
|
||||
<i class="fa fa-mobile-phone"></i>
|
||||
<i class="fa fa-modx"></i>
|
||||
<i class="fa fa-money"></i>
|
||||
<i class="fa fa-moon-o"></i>
|
||||
<i class="fa fa-mortar-board"></i>
|
||||
<i class="fa fa-motorcycle"></i>
|
||||
<i class="fa fa-mouse-pointer"></i>
|
||||
<i class="fa fa-music"></i>
|
||||
<i class="fa fa-navicon"></i>
|
||||
<i class="fa fa-neuter"></i>
|
||||
<i class="fa fa-newspaper-o"></i>
|
||||
<i class="fa fa-object-group"></i>
|
||||
<i class="fa fa-object-ungroup"></i>
|
||||
<i class="fa fa-odnoklassniki"></i>
|
||||
<i class="fa fa-odnoklassniki-square"></i>
|
||||
<i class="fa fa-opencart"></i>
|
||||
<i class="fa fa-openid"></i>
|
||||
<i class="fa fa-opera"></i>
|
||||
<i class="fa fa-optin-monster"></i>
|
||||
<i class="fa fa-outdent"></i>
|
||||
<i class="fa fa-pagelines"></i>
|
||||
<i class="fa fa-paint-brush"></i>
|
||||
<i class="fa fa-paper-plane"></i>
|
||||
<i class="fa fa-paper-plane-o"></i>
|
||||
<i class="fa fa-paperclip"></i>
|
||||
<i class="fa fa-paragraph"></i>
|
||||
<i class="fa fa-paste"></i>
|
||||
<i class="fa fa-pause"></i>
|
||||
<i class="fa fa-pause-circle"></i>
|
||||
<i class="fa fa-pause-circle-o"></i>
|
||||
<i class="fa fa-paw"></i>
|
||||
<i class="fa fa-paypal"></i>
|
||||
<i class="fa fa-pencil"></i>
|
||||
<i class="fa fa-pencil-square"></i>
|
||||
<i class="fa fa-pencil-square-o"></i>
|
||||
<i class="fa fa-percent"></i>
|
||||
<i class="fa fa-phone"></i>
|
||||
<i class="fa fa-phone-square"></i>
|
||||
<i class="fa fa-photo"></i>
|
||||
<i class="fa fa-picture-o"></i>
|
||||
<i class="fa fa-pie-chart"></i>
|
||||
<i class="fa fa-pied-piper"></i>
|
||||
<i class="fa fa-pied-piper-alt"></i>
|
||||
<i class="fa fa-pied-piper-pp"></i>
|
||||
<i class="fa fa-pinterest"></i>
|
||||
<i class="fa fa-pinterest-p"></i>
|
||||
<i class="fa fa-pinterest-square"></i>
|
||||
<i class="fa fa-plane"></i>
|
||||
<i class="fa fa-play"></i>
|
||||
<i class="fa fa-play-circle"></i>
|
||||
<i class="fa fa-play-circle-o"></i>
|
||||
<i class="fa fa-plug"></i>
|
||||
<i class="fa fa-plus"></i>
|
||||
<i class="fa fa-plus-circle"></i>
|
||||
<i class="fa fa-plus-square"></i>
|
||||
<i class="fa fa-plus-square-o"></i>
|
||||
<i class="fa fa-podcast"></i>
|
||||
<i class="fa fa-power-off"></i>
|
||||
<i class="fa fa-print"></i>
|
||||
<i class="fa fa-product-hunt"></i>
|
||||
<i class="fa fa-puzzle-piece"></i>
|
||||
<i class="fa fa-qq"></i>
|
||||
<i class="fa fa-qrcode"></i>
|
||||
<i class="fa fa-question"></i>
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<i class="fa fa-question-circle-o"></i>
|
||||
<i class="fa fa-quora"></i>
|
||||
<i class="fa fa-quote-left"></i>
|
||||
<i class="fa fa-quote-right"></i>
|
||||
<i class="fa fa-ra"></i>
|
||||
<i class="fa fa-random"></i>
|
||||
<i class="fa fa-ravelry"></i>
|
||||
<i class="fa fa-rebel"></i>
|
||||
<i class="fa fa-recycle"></i>
|
||||
<i class="fa fa-reddit"></i>
|
||||
<i class="fa fa-reddit-alien"></i>
|
||||
<i class="fa fa-reddit-square"></i>
|
||||
<i class="fa fa-refresh"></i>
|
||||
<i class="fa fa-registered"></i>
|
||||
<i class="fa fa-remove"></i>
|
||||
<i class="fa fa-renren"></i>
|
||||
<i class="fa fa-reorder"></i>
|
||||
<i class="fa fa-repeat"></i>
|
||||
<i class="fa fa-reply"></i>
|
||||
<i class="fa fa-reply-all"></i>
|
||||
<i class="fa fa-resistance"></i>
|
||||
<i class="fa fa-retweet"></i>
|
||||
<i class="fa fa-rmb"></i>
|
||||
<i class="fa fa-road"></i>
|
||||
<i class="fa fa-rocket"></i>
|
||||
<i class="fa fa-rotate-left"></i>
|
||||
<i class="fa fa-rotate-right"></i>
|
||||
<i class="fa fa-rouble"></i>
|
||||
<i class="fa fa-rss"></i>
|
||||
<i class="fa fa-rss-square"></i>
|
||||
<i class="fa fa-rub"></i>
|
||||
<i class="fa fa-ruble"></i>
|
||||
<i class="fa fa-rupee"></i>
|
||||
<i class="fa fa-s15"></i>
|
||||
<i class="fa fa-safari"></i>
|
||||
<i class="fa fa-save"></i>
|
||||
<i class="fa fa-scissors"></i>
|
||||
<i class="fa fa-scribd"></i>
|
||||
<i class="fa fa-search"></i>
|
||||
<i class="fa fa-search-minus"></i>
|
||||
<i class="fa fa-search-plus"></i>
|
||||
<i class="fa fa-sellsy"></i>
|
||||
<i class="fa fa-send"></i>
|
||||
<i class="fa fa-send-o"></i>
|
||||
<i class="fa fa-server"></i>
|
||||
<i class="fa fa-share"></i>
|
||||
<i class="fa fa-share-alt"></i>
|
||||
<i class="fa fa-share-alt-square"></i>
|
||||
<i class="fa fa-share-square"></i>
|
||||
<i class="fa fa-share-square-o"></i>
|
||||
<i class="fa fa-shekel"></i>
|
||||
<i class="fa fa-sheqel"></i>
|
||||
<i class="fa fa-shield"></i>
|
||||
<i class="fa fa-ship"></i>
|
||||
<i class="fa fa-shirtsinbulk"></i>
|
||||
<i class="fa fa-shopping-bag"></i>
|
||||
<i class="fa fa-shopping-basket"></i>
|
||||
<i class="fa fa-shopping-cart"></i>
|
||||
<i class="fa fa-shower"></i>
|
||||
<i class="fa fa-sign-in"></i>
|
||||
<i class="fa fa-sign-language"></i>
|
||||
<i class="fa fa-sign-out"></i>
|
||||
<i class="fa fa-signal"></i>
|
||||
<i class="fa fa-signing"></i>
|
||||
<i class="fa fa-simplybuilt"></i>
|
||||
<i class="fa fa-sitemap"></i>
|
||||
<i class="fa fa-skyatlas"></i>
|
||||
<i class="fa fa-skype"></i>
|
||||
<i class="fa fa-slack"></i>
|
||||
<i class="fa fa-sliders"></i>
|
||||
<i class="fa fa-slideshare"></i>
|
||||
<i class="fa fa-smile-o"></i>
|
||||
<i class="fa fa-snapchat"></i>
|
||||
<i class="fa fa-snapchat-ghost"></i>
|
||||
<i class="fa fa-snapchat-square"></i>
|
||||
<i class="fa fa-snowflake-o"></i>
|
||||
<i class="fa fa-soccer-ball-o"></i>
|
||||
<i class="fa fa-sort"></i>
|
||||
<i class="fa fa-sort-alpha-asc"></i>
|
||||
<i class="fa fa-sort-alpha-desc"></i>
|
||||
<i class="fa fa-sort-amount-asc"></i>
|
||||
<i class="fa fa-sort-amount-desc"></i>
|
||||
<i class="fa fa-sort-asc"></i>
|
||||
<i class="fa fa-sort-desc"></i>
|
||||
<i class="fa fa-sort-down"></i>
|
||||
<i class="fa fa-sort-numeric-asc"></i>
|
||||
<i class="fa fa-sort-numeric-desc"></i>
|
||||
<i class="fa fa-sort-up"></i>
|
||||
<i class="fa fa-soundcloud"></i>
|
||||
<i class="fa fa-space-shuttle"></i>
|
||||
<i class="fa fa-spinner"></i>
|
||||
<i class="fa fa-spoon"></i>
|
||||
<i class="fa fa-spotify"></i>
|
||||
<i class="fa fa-square"></i>
|
||||
<i class="fa fa-square-o"></i>
|
||||
<i class="fa fa-stack-exchange"></i>
|
||||
<i class="fa fa-stack-overflow"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star-half"></i>
|
||||
<i class="fa fa-star-half-empty"></i>
|
||||
<i class="fa fa-star-half-full"></i>
|
||||
<i class="fa fa-star-half-o"></i>
|
||||
<i class="fa fa-star-o"></i>
|
||||
<i class="fa fa-steam"></i>
|
||||
<i class="fa fa-steam-square"></i>
|
||||
<i class="fa fa-step-backward"></i>
|
||||
<i class="fa fa-step-forward"></i>
|
||||
<i class="fa fa-stethoscope"></i>
|
||||
<i class="fa fa-sticky-note"></i>
|
||||
<i class="fa fa-sticky-note-o"></i>
|
||||
<i class="fa fa-stop"></i>
|
||||
<i class="fa fa-stop-circle"></i>
|
||||
<i class="fa fa-stop-circle-o"></i>
|
||||
<i class="fa fa-street-view"></i>
|
||||
<i class="fa fa-strikethrough"></i>
|
||||
<i class="fa fa-stumbleupon"></i>
|
||||
<i class="fa fa-stumbleupon-circle"></i>
|
||||
<i class="fa fa-subscript"></i>
|
||||
<i class="fa fa-subway"></i>
|
||||
<i class="fa fa-suitcase"></i>
|
||||
<i class="fa fa-sun-o"></i>
|
||||
<i class="fa fa-superpowers"></i>
|
||||
<i class="fa fa-superscript"></i>
|
||||
<i class="fa fa-support"></i>
|
||||
<i class="fa fa-table"></i>
|
||||
<i class="fa fa-tablet"></i>
|
||||
<i class="fa fa-tachometer"></i>
|
||||
<i class="fa fa-tag"></i>
|
||||
<i class="fa fa-tags"></i>
|
||||
<i class="fa fa-tasks"></i>
|
||||
<i class="fa fa-taxi"></i>
|
||||
<i class="fa fa-telegram"></i>
|
||||
<i class="fa fa-television"></i>
|
||||
<i class="fa fa-tencent-weibo"></i>
|
||||
<i class="fa fa-terminal"></i>
|
||||
<i class="fa fa-text-height"></i>
|
||||
<i class="fa fa-text-width"></i>
|
||||
<i class="fa fa-th"></i>
|
||||
<i class="fa fa-th-large"></i>
|
||||
<i class="fa fa-th-list"></i>
|
||||
<i class="fa fa-themeisle"></i>
|
||||
<i class="fa fa-thermometer"></i>
|
||||
<i class="fa fa-thermometer-0"></i>
|
||||
<i class="fa fa-thermometer-1"></i>
|
||||
<i class="fa fa-thermometer-2"></i>
|
||||
<i class="fa fa-thermometer-3"></i>
|
||||
<i class="fa fa-thermometer-4"></i>
|
||||
<i class="fa fa-thermometer-empty"></i>
|
||||
<i class="fa fa-thermometer-full"></i>
|
||||
<i class="fa fa-thermometer-half"></i>
|
||||
<i class="fa fa-thermometer-quarter"></i>
|
||||
<i class="fa fa-thermometer-three-quarters"></i>
|
||||
<i class="fa fa-thumb-tack"></i>
|
||||
<i class="fa fa-thumbs-down"></i>
|
||||
<i class="fa fa-thumbs-o-down"></i>
|
||||
<i class="fa fa-thumbs-o-up"></i>
|
||||
<i class="fa fa-thumbs-up"></i>
|
||||
<i class="fa fa-ticket"></i>
|
||||
<i class="fa fa-times"></i>
|
||||
<i class="fa fa-times-circle"></i>
|
||||
<i class="fa fa-times-circle-o"></i>
|
||||
<i class="fa fa-times-rectangle"></i>
|
||||
<i class="fa fa-times-rectangle-o"></i>
|
||||
<i class="fa fa-tint"></i>
|
||||
<i class="fa fa-toggle-down"></i>
|
||||
<i class="fa fa-toggle-left"></i>
|
||||
<i class="fa fa-toggle-off"></i>
|
||||
<i class="fa fa-toggle-on"></i>
|
||||
<i class="fa fa-toggle-right"></i>
|
||||
<i class="fa fa-toggle-up"></i>
|
||||
<i class="fa fa-trademark"></i>
|
||||
<i class="fa fa-train"></i>
|
||||
<i class="fa fa-transgender"></i>
|
||||
<i class="fa fa-transgender-alt"></i>
|
||||
<i class="fa fa-trash"></i>
|
||||
<i class="fa fa-trash-o"></i>
|
||||
<i class="fa fa-tree"></i>
|
||||
<i class="fa fa-trello"></i>
|
||||
<i class="fa fa-tripadvisor"></i>
|
||||
<i class="fa fa-trophy"></i>
|
||||
<i class="fa fa-truck"></i>
|
||||
<i class="fa fa-try"></i>
|
||||
<i class="fa fa-tty"></i>
|
||||
<i class="fa fa-tumblr"></i>
|
||||
<i class="fa fa-tumblr-square"></i>
|
||||
<i class="fa fa-turkish-lira"></i>
|
||||
<i class="fa fa-tv"></i>
|
||||
<i class="fa fa-twitch"></i>
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-twitter-square"></i>
|
||||
<i class="fa fa-umbrella"></i>
|
||||
<i class="fa fa-underline"></i>
|
||||
<i class="fa fa-undo"></i>
|
||||
<i class="fa fa-universal-access"></i>
|
||||
<i class="fa fa-university"></i>
|
||||
<i class="fa fa-unlink"></i>
|
||||
<i class="fa fa-unlock"></i>
|
||||
<i class="fa fa-unlock-alt"></i>
|
||||
<i class="fa fa-unsorted"></i>
|
||||
<i class="fa fa-upload"></i>
|
||||
<i class="fa fa-usb"></i>
|
||||
<i class="fa fa-usd"></i>
|
||||
<i class="fa fa-user"></i>
|
||||
<i class="fa fa-user-circle"></i>
|
||||
<i class="fa fa-user-circle-o"></i>
|
||||
<i class="fa fa-user-md"></i>
|
||||
<i class="fa fa-user-o"></i>
|
||||
<i class="fa fa-user-plus"></i>
|
||||
<i class="fa fa-user-secret"></i>
|
||||
<i class="fa fa-user-times"></i>
|
||||
<i class="fa fa-users"></i>
|
||||
<i class="fa fa-vcard"></i>
|
||||
<i class="fa fa-vcard-o"></i>
|
||||
<i class="fa fa-venus"></i>
|
||||
<i class="fa fa-venus-double"></i>
|
||||
<i class="fa fa-venus-mars"></i>
|
||||
<i class="fa fa-viacoin"></i>
|
||||
<i class="fa fa-viadeo"></i>
|
||||
<i class="fa fa-viadeo-square"></i>
|
||||
<i class="fa fa-video-camera"></i>
|
||||
<i class="fa fa-vimeo"></i>
|
||||
<i class="fa fa-vimeo-square"></i>
|
||||
<i class="fa fa-vine"></i>
|
||||
<i class="fa fa-vk"></i>
|
||||
<i class="fa fa-volume-control-phone"></i>
|
||||
<i class="fa fa-volume-down"></i>
|
||||
<i class="fa fa-volume-off"></i>
|
||||
<i class="fa fa-volume-up"></i>
|
||||
<i class="fa fa-warning"></i>
|
||||
<i class="fa fa-wechat"></i>
|
||||
<i class="fa fa-weibo"></i>
|
||||
<i class="fa fa-weixin"></i>
|
||||
<i class="fa fa-whatsapp"></i>
|
||||
<i class="fa fa-wheelchair"></i>
|
||||
<i class="fa fa-wheelchair-alt"></i>
|
||||
<i class="fa fa-wifi"></i>
|
||||
<i class="fa fa-wikipedia-w"></i>
|
||||
<i class="fa fa-window-close"></i>
|
||||
<i class="fa fa-window-close-o"></i>
|
||||
<i class="fa fa-window-maximize"></i>
|
||||
<i class="fa fa-window-minimize"></i>
|
||||
<i class="fa fa-window-restore"></i>
|
||||
<i class="fa fa-windows"></i>
|
||||
<i class="fa fa-won"></i>
|
||||
<i class="fa fa-wordpress"></i>
|
||||
<i class="fa fa-wpbeginner"></i>
|
||||
<i class="fa fa-wpexplorer"></i>
|
||||
<i class="fa fa-wpforms"></i>
|
||||
<i class="fa fa-wrench"></i>
|
||||
<i class="fa fa-xing"></i>
|
||||
<i class="fa fa-xing-square"></i>
|
||||
<i class="fa fa-y-combinator"></i>
|
||||
<i class="fa fa-y-combinator-square"></i>
|
||||
<i class="fa fa-yahoo"></i>
|
||||
<i class="fa fa-yc"></i>
|
||||
<i class="fa fa-yc-square"></i>
|
||||
<i class="fa fa-yelp"></i>
|
||||
<i class="fa fa-yen"></i>
|
||||
<i class="fa fa-yoast"></i>
|
||||
<i class="fa fa-youtube"></i>
|
||||
<i class="fa fa-youtube-play"></i>
|
||||
<i class="fa fa-youtube-square"></i>
|
||||
|
||||
{{{ each icons }}}
|
||||
<i class="fa fa-xl fa-{icons.style} fa-{icons.id}"></i>
|
||||
{{{ end }}}
|
||||
</div>
|
||||
<p class="form-text text-center">
|
||||
For a full list of icons, please consult:
|
||||
|
||||
Reference in New Issue
Block a user