Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Integrarea Font Awesome ca și buton în SCEditor

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Integrarea Font Awesome ca și buton în SCEditor

Mesaj Scris de Kames Mier Dec 12, 2018 8:31 pm

Integrarea Font Awesome ca și buton in SCEditor

Introducere

Ce este "Font Awesome"?

Font Awesome este un set de instrumente pentru fonturi și pictograme bazate pe CSS și LESS. A fost realizat de Dave Gandy pentru utilizarea cu Twitter Bootstrap, și mai târziu a fost încorporat în BootstrapCDN.
Exemple de pictograme Font Awesome:
Integrarea Font Awesome ca și buton în SCEditor Screen18
Acestea pot fi introduse, cu ajutorul acestui tutorial, în editorul de mesaje.

Scopul tutorialului

Acest tutorial vă permite să creați un buton Font Awesome, unde veți avea acces la toate pictogramele acestuia, în editorul de mesaje

Instalare

Singurul lucru pe care trebuie să îl faceți este să instalați un singur cod, acela fiind unul JavaScript. Fără el tutorialul nu va funcționa. Pentru a instala codul JavaScript, mergeți în Panoul de administrare » Diverse » HTML & JAVASCRIPT » Gestiunea codurilor JavaScript, urmând să apăsați pe . Totodată, verificați dacă codurile JavaScript sunt activate.
  • Titlu: Integrarea Font Awesome ca și buton în SCEditor
  • Amplasare: Toate paginile
  • Cod JavaScript: Copiați și introduceți codul de mai jos
Cod:
        /*globals jQuery*/
        /**
        *! Create a button in the SCEditor Toolbar that allows the user to find and use any of the FontAweome (4.7.0) icons.
        *
        *  @author Luiz
        *  @licence MIT
        *
        *  Copyright (c) Luiz Felipe | All rights reserved.
        */
        (function ($) {
          'use strict';
       
          var global = {
            icons: [
              'fa-500px', 'fa-address-book', 'fa-address-book-o',
              'fa-address-card', 'fa-address-card-o', 'fa-adjust',
              'fa-adn', 'fa-align-center', 'fa-align-justify',
              'fa-align-left', 'fa-align-right', 'fa-amazon',
              'fa-ambulance', 'fa-american-sign-language-interpreting', 'fa-anchor',
              'fa-android', 'fa-angellist', 'fa-angle-double-down',
              'fa-angle-double-left', 'fa-angle-double-right', 'fa-angle-double-up',
              'fa-angle-down', 'fa-angle-left', 'fa-angle-right',
              'fa-angle-up', 'fa-apple', 'fa-archive',
              'fa-area-chart', 'fa-arrow-circle-down', 'fa-arrow-circle-left',
              'fa-arrow-circle-o-down', 'fa-arrow-circle-o-left', 'fa-arrow-circle-o-right',
              'fa-arrow-circle-o-up', 'fa-arrow-circle-right', 'fa-arrow-circle-up',
              'fa-arrow-down', 'fa-arrow-left', 'fa-arrow-right',
              'fa-arrow-up', 'fa-arrows', 'fa-arrows-alt',
              'fa-arrows-h', 'fa-arrows-v', 'fa-assistive-listening-systems',
              'fa-asterisk', 'fa-at', 'fa-audio-description',
              'fa-backward', 'fa-balance-scale', 'fa-ban',
              'fa-bandcamp', 'fa-bar-chart', 'fa-barcode',
              'fa-bars', 'fa-bath', 'fa-battery-empty',
              'fa-battery-full', 'fa-battery-half', 'fa-battery-quarter',
              'fa-battery-three-quarters', 'fa-bed', 'fa-beer',
              'fa-behance', 'fa-behance-square', 'fa-bell',
              'fa-bell-o', 'fa-bell-slash', 'fa-bell-slash-o',
              'fa-bicycle', 'fa-binoculars', 'fa-birthday-cake',
              'fa-bitbucket', 'fa-bitbucket-square', 'fa-black-tie',
              'fa-blind', 'fa-bluetooth', 'fa-bluetooth-b',
              'fa-bold', 'fa-bolt', 'fa-bomb',
              'fa-book', 'fa-bookmark', 'fa-bookmark-o',
              'fa-braille', 'fa-briefcase', 'fa-btc',
              'fa-bug', 'fa-building', 'fa-building-o',
              'fa-bullhorn', 'fa-bullseye', 'fa-bus',
              'fa-buysellads', 'fa-calculator', 'fa-calendar',
              'fa-calendar-check-o', 'fa-calendar-minus-o', 'fa-calendar-o',
              'fa-calendar-plus-o', 'fa-calendar-times-o', 'fa-camera',
              'fa-camera-retro', 'fa-car', 'fa-caret-down',
              'fa-caret-left', 'fa-caret-right', 'fa-caret-square-o-down',
              'fa-caret-square-o-left', 'fa-caret-square-o-right', 'fa-caret-square-o-up',
              'fa-caret-up', 'fa-cart-arrow-down', 'fa-cart-plus',
              'fa-cc', 'fa-cc-amex', 'fa-cc-diners-club',
              'fa-cc-discover', 'fa-cc-jcb', 'fa-cc-mastercard',
              'fa-cc-paypal', 'fa-cc-stripe', 'fa-cc-visa',
              'fa-certificate', 'fa-chain-broken', 'fa-check',
              'fa-check-circle', 'fa-check-circle-o', 'fa-check-square',
              'fa-check-square-o', 'fa-chevron-circle-down', 'fa-chevron-circle-left',
              'fa-chevron-circle-right', 'fa-chevron-circle-up', 'fa-chevron-down',
              'fa-chevron-left', 'fa-chevron-right', 'fa-chevron-up',
              'fa-child', 'fa-chrome', 'fa-circle',
              'fa-circle-o', 'fa-circle-o-notch', 'fa-circle-thin',
              'fa-clipboard', 'fa-clock-o', 'fa-clone',
              'fa-cloud', 'fa-cloud-download', 'fa-cloud-upload',
              'fa-code', 'fa-code-fork', 'fa-codepen',
              'fa-codiepie', 'fa-coffee', 'fa-cog',
              'fa-cogs', 'fa-columns', 'fa-comment',
              'fa-comment-o', 'fa-commenting', 'fa-commenting-o',
              'fa-comments', 'fa-comments-o', 'fa-compass',
              'fa-compress', 'fa-connectdevelop', 'fa-contao',
              'fa-copyright', 'fa-creative-commons', 'fa-credit-card',
              'fa-credit-card-alt', 'fa-crop', 'fa-crosshairs',
              'fa-css3', 'fa-cube', 'fa-cubes',
              'fa-cutlery', 'fa-dashcube', 'fa-database',
              'fa-deaf', 'fa-delicious', 'fa-desktop',
              'fa-deviantart', 'fa-diamond', 'fa-digg',
              'fa-dot-circle-o', 'fa-download', 'fa-dribbble',
              'fa-dropbox', 'fa-drupal', 'fa-edge',
              'fa-eercast', 'fa-eject', 'fa-ellipsis-h',
              'fa-ellipsis-v', 'fa-empire', 'fa-envelope',
              'fa-envelope-o', 'fa-envelope-open', 'fa-envelope-open-o',
              'fa-envelope-square', 'fa-envira', 'fa-eraser',
              'fa-etsy', 'fa-eur', 'fa-exchange',
              'fa-exclamation', 'fa-exclamation-circle', 'fa-exclamation-triangle',
              'fa-expand', 'fa-expeditedssl', 'fa-external-link',
              'fa-external-link-square', 'fa-eye', 'fa-eye-slash',
              'fa-eyedropper', 'fa-facebook', 'fa-facebook-official',
              'fa-facebook-square', 'fa-fast-backward', 'fa-fast-forward',
              'fa-fax', 'fa-female', 'fa-fighter-jet',
              'fa-file', 'fa-file-archive-o', 'fa-file-audio-o',
              'fa-file-code-o', 'fa-file-excel-o', 'fa-file-image-o',
              'fa-file-o', 'fa-file-pdf-o', 'fa-file-powerpoint-o',
              'fa-file-text', 'fa-file-text-o', 'fa-file-video-o',
              'fa-file-word-o', 'fa-files-o', 'fa-film',
              'fa-filter', 'fa-fire', 'fa-fire-extinguisher',
              'fa-firefox', 'fa-first-order', 'fa-flag',
              'fa-flag-checkered', 'fa-flag-o', 'fa-flask',
              'fa-flickr', 'fa-floppy-o', 'fa-folder',
              'fa-folder-o', 'fa-folder-open', 'fa-folder-open-o',
              'fa-font', 'fa-font-awesome', 'fa-fonticons',
              'fa-fort-awesome', 'fa-forumbee', 'fa-forward',
              'fa-foursquare', 'fa-free-code-camp', 'fa-frown-o',
              'fa-futbol-o', 'fa-gamepad', 'fa-gavel',
              'fa-gbp', 'fa-genderless', 'fa-get-pocket',
              'fa-gg', 'fa-gg-circle', 'fa-gift',
              'fa-git', 'fa-git-square', 'fa-github',
              'fa-github-alt', 'fa-github-square', 'fa-gitlab',
              'fa-glass', 'fa-glide', 'fa-glide-g',
              'fa-globe', 'fa-google', 'fa-google-plus',
              'fa-google-plus-official', 'fa-google-plus-square', 'fa-google-wallet',
              'fa-graduation-cap', 'fa-gratipay', 'fa-grav',
              'fa-h-square', 'fa-hacker-news', 'fa-hand-lizard-o',
              'fa-hand-o-down', 'fa-hand-o-left', 'fa-hand-o-right',
              'fa-hand-o-up', 'fa-hand-paper-o', 'fa-hand-peace-o',
              'fa-hand-pointer-o', 'fa-hand-rock-o', 'fa-hand-scissors-o',
              'fa-hand-spock-o', 'fa-handshake-o', 'fa-hashtag',
              'fa-hdd-o', 'fa-header', 'fa-headphones',
              'fa-heart', 'fa-heart-o', 'fa-heartbeat',
              'fa-history', 'fa-home', 'fa-hospital-o',
              'fa-hourglass', 'fa-hourglass-end', 'fa-hourglass-half',
              'fa-hourglass-o', 'fa-hourglass-start', 'fa-houzz',
              'fa-html5', 'fa-i-cursor', 'fa-id-badge',
              'fa-id-card', 'fa-id-card-o', 'fa-ils',
              'fa-imdb', 'fa-inbox', 'fa-indent',
              'fa-industry', 'fa-info', 'fa-info-circle',
              'fa-inr', 'fa-instagram', 'fa-internet-explorer',
              'fa-ioxhost', 'fa-italic', 'fa-joomla',
              'fa-jpy', 'fa-jsfiddle', 'fa-key',
              'fa-keyboard-o', 'fa-krw', 'fa-language',
              'fa-laptop', 'fa-lastfm', 'fa-lastfm-square',
              'fa-leaf', 'fa-leanpub', 'fa-lemon-o',
              'fa-level-down', 'fa-level-up', 'fa-life-ring',
              'fa-lightbulb-o', 'fa-line-chart', 'fa-link',
              'fa-linkedin', 'fa-linkedin-square', 'fa-linode',
              'fa-linux', 'fa-list', 'fa-list-alt',
              'fa-list-ol', 'fa-list-ul', 'fa-location-arrow',
              'fa-lock', 'fa-long-arrow-down', 'fa-long-arrow-left',
              'fa-long-arrow-right', 'fa-long-arrow-up', 'fa-low-vision',
              'fa-magic', 'fa-magnet', 'fa-male',
              'fa-map', 'fa-map-marker', 'fa-map-o',
              'fa-map-pin', 'fa-map-signs', 'fa-mars',
              'fa-mars-double', 'fa-mars-stroke', 'fa-mars-stroke-h',
              'fa-mars-stroke-v', 'fa-maxcdn', 'fa-meanpath',
              'fa-medium', 'fa-medkit', 'fa-meetup',
              'fa-meh-o', 'fa-mercury', 'fa-microchip',
              'fa-microphone', 'fa-microphone-slash', 'fa-minus',
              'fa-minus-circle', 'fa-minus-square', 'fa-minus-square-o',
              'fa-mixcloud', 'fa-mobile', 'fa-modx',
              'fa-money', 'fa-moon-o', 'fa-motorcycle',
              'fa-mouse-pointer', 'fa-music', 'fa-neuter',
              'fa-newspaper-o', 'fa-object-group', 'fa-object-ungroup',
              'fa-odnoklassniki', 'fa-odnoklassniki-square', 'fa-opencart',
              'fa-openid', 'fa-opera', 'fa-optin-monster',
              'fa-outdent', 'fa-pagelines', 'fa-paint-brush',
              'fa-paper-plane', 'fa-paper-plane-o', 'fa-paperclip',
              'fa-paragraph', 'fa-pause', 'fa-pause-circle',
              'fa-pause-circle-o', 'fa-paw', 'fa-paypal',
              'fa-pencil', 'fa-pencil-square', 'fa-pencil-square-o',
              'fa-percent', 'fa-phone', 'fa-phone-square',
              'fa-picture-o', 'fa-pie-chart', 'fa-pied-piper',
              'fa-pied-piper-alt', 'fa-pied-piper-pp', 'fa-pinterest',
              'fa-pinterest-p', 'fa-pinterest-square', 'fa-plane',
              'fa-play', 'fa-play-circle', 'fa-play-circle-o',
              'fa-plug', 'fa-plus', 'fa-plus-circle',
              'fa-plus-square', 'fa-plus-square-o', 'fa-podcast',
              'fa-power-off', 'fa-print', 'fa-product-hunt',
              'fa-puzzle-piece', 'fa-qq', 'fa-qrcode',
              'fa-question', 'fa-question-circle', 'fa-question-circle-o',
              'fa-quora', 'fa-quote-left', 'fa-quote-right',
              'fa-random', 'fa-ravelry', 'fa-rebel',
              'fa-recycle', 'fa-reddit', 'fa-reddit-alien',
              'fa-reddit-square', 'fa-refresh', 'fa-registered',
              'fa-renren', 'fa-repeat', 'fa-reply',
              'fa-reply-all', 'fa-retweet', 'fa-road',
              'fa-rocket', 'fa-rss', 'fa-rss-square',
              'fa-rub', 'fa-safari', 'fa-scissors',
              'fa-scribd', 'fa-search', 'fa-search-minus',
              'fa-search-plus', 'fa-sellsy', 'fa-server',
              'fa-share', 'fa-share-alt', 'fa-share-alt-square',
              'fa-share-square', 'fa-share-square-o', 'fa-shield',
              'fa-ship', 'fa-shirtsinbulk', 'fa-shopping-bag',
              'fa-shopping-basket', 'fa-shopping-cart', 'fa-shower',
              'fa-sign-in', 'fa-sign-language', 'fa-sign-out',
              'fa-signal', 'fa-simplybuilt', 'fa-sitemap',
              'fa-skyatlas', 'fa-skype', 'fa-slack',
              'fa-sliders', 'fa-slideshare', 'fa-smile-o',
              'fa-snapchat', 'fa-snapchat-ghost', 'fa-snapchat-square',
              'fa-snowflake-o', 'fa-sort', 'fa-sort-alpha-asc',
              'fa-sort-alpha-desc', 'fa-sort-amount-asc', 'fa-sort-amount-desc',
              'fa-sort-asc', 'fa-sort-desc', 'fa-sort-numeric-asc',
              'fa-sort-numeric-desc', 'fa-soundcloud', 'fa-space-shuttle',
              'fa-spinner', 'fa-spoon', 'fa-spotify',
              'fa-square', 'fa-square-o', 'fa-stack-exchange',
              'fa-stack-overflow', 'fa-star', 'fa-star-half',
              'fa-star-half-o', 'fa-star-o', 'fa-steam',
              'fa-steam-square', 'fa-step-backward', 'fa-step-forward',
              'fa-stethoscope', 'fa-sticky-note', 'fa-sticky-note-o',
              'fa-stop', 'fa-stop-circle', 'fa-stop-circle-o',
              'fa-street-view', 'fa-strikethrough', 'fa-stumbleupon',
              'fa-stumbleupon-circle', 'fa-subscript', 'fa-subway',
              'fa-suitcase', 'fa-sun-o', 'fa-superpowers',
              'fa-superscript', 'fa-table', 'fa-tablet',
              'fa-tachometer', 'fa-tag', 'fa-tags',
              'fa-tasks', 'fa-taxi', 'fa-telegram',
              'fa-television', 'fa-tencent-weibo', 'fa-terminal',
              'fa-text-height', 'fa-text-width', 'fa-th',
              'fa-th-large', 'fa-th-list', 'fa-themeisle',
              'fa-thermometer-empty', 'fa-thermometer-full', 'fa-thermometer-half',
              'fa-thermometer-quarter', 'fa-thermometer-three-quarters', 'fa-thumb-tack',
              'fa-thumbs-down', 'fa-thumbs-o-down', 'fa-thumbs-o-up',
              'fa-thumbs-up', 'fa-ticket', 'fa-times',
              'fa-times-circle', 'fa-times-circle-o', 'fa-tint',
              'fa-toggle-off', 'fa-toggle-on', 'fa-trademark',
              'fa-train', 'fa-transgender', 'fa-transgender-alt',
              'fa-trash', 'fa-trash-o', 'fa-tree',
              'fa-trello', 'fa-tripadvisor', 'fa-trophy',
              'fa-truck', 'fa-try', 'fa-tty',
              'fa-tumblr', 'fa-tumblr-square', 'fa-twitch',
              'fa-twitter', 'fa-twitter-square', 'fa-umbrella',
              'fa-underline', 'fa-undo', 'fa-universal-access',
              'fa-university', 'fa-unlock', 'fa-unlock-alt',
              'fa-upload', 'fa-usb', 'fa-usd',
              'fa-user', 'fa-user-circle', 'fa-user-circle-o',
              'fa-user-md', 'fa-user-o', 'fa-user-plus',
              'fa-user-secret', 'fa-user-times', 'fa-users',
              'fa-venus', 'fa-venus-double', 'fa-venus-mars',
              'fa-viacoin', 'fa-viadeo', 'fa-viadeo-square',
              'fa-video-camera', 'fa-vimeo', 'fa-vimeo-square',
              'fa-vine', 'fa-vk', 'fa-volume-control-phone',
              'fa-volume-down', 'fa-volume-off', 'fa-volume-up',
              'fa-weibo', 'fa-weixin', 'fa-whatsapp',
              'fa-wheelchair', 'fa-wheelchair-alt', 'fa-wifi',
              'fa-wikipedia-w', 'fa-window-close', 'fa-window-close-o',
              'fa-window-maximize', 'fa-window-minimize', 'fa-window-restore',
              'fa-windows', 'fa-wordpress', 'fa-wpbeginner',
              'fa-wpexplorer', 'fa-wpforms', 'fa-wrench',
              'fa-xing', 'fa-xing-square', 'fa-y-combinator',
              'fa-yahoo', 'fa-yelp', 'fa-yoast',
              'fa-youtube', 'fa-youtube-play', 'fa-youtube-square'
            ],
       
            find: function (icon) {
       
              var $row = global.template.find('.fontawesome-icon-row');
       
              $row.each(function () {
                var $this = $(this);
                var $data = $this.attr('data-icon');
       
                if ($data.indexOf(icon) === -1) {
                  $this.hide();
                  return;
                }
       
                $this.show();
              });
            }
          };
       
          $(window).on('load', function () {
       
            var $textarea = $('#text_editor_textarea');
       
            if ($textarea.length === 0) {
              return false;
            }
         
            global.sceditor = $textarea.sceditor('instance');
       
            /**
            *! Parte 01
            *  Criar os ícones e o sistema de busca.
            */
            global.template = $([
              '<div class="sceditor-dropdown fontawesome-icons-dropdown" style="display: none;">',
              '  <header>',
              '    <h5><i class="fa fa-flag"></i> Pictograme Font Awesome</h5>',
              '    <form>',
              '      <label for="fa-find-icon">Cautati pictograma...</label>',
              '      <input type="text" id="fa-find-icon" />',
              '    </form>',
              '  </header>',
              '  <main>',
              '    <table class="fa-icons-append-zone">',
              '    </table>',
              '  </main>',
              '</div>'
            ].join('\n')).appendTo('body');
       
            $.each(global.icons, function (index, icon) {
       
              var $zone = global.template.find('.fa-icons-append-zone');
              var title = ' ' + icon
                .replace(/^fa/gi, '')
                .replace(/-o(?!\w)/g, ' Outlined')
                .replace(/-/g, ' ')
                .trim()
              ;
           
              $('<tr>', {
                'data-icon': icon,
                'class': 'fontawesome-icon-row',
                html: $('<td>', {
                  html: $('<a>', {
                    'class': 'fa ' + icon,
                    html: $('<span>', {
                      style: 'text-transform: capitalize;',
                      text: title
                    }).prop('outerHTML')
                  }).prop('outerHTML')
                }).prop('outerHTML')
              })
                .appendTo($zone)
                  .on('click', function () {
                    global.sceditor
                      .insertText('[table class="fa-fontawesome-icon fa ' + $(this).attr('data-icon') + '"][/table]')
                    ;
       
                    global.template
                      .hide()
                        .find('#fa-find-icon')
                          .val('')
                    ;
                  })
              ;
           
            });
       
            global.template
              .find('#fa-find-icon')
                .on('keyup', function () {
                  var icon = $(this).val();
                  global.find(icon);
                })
            ;
       
            /**
            *! Parte 02
            *  Criando a interação com o SCEditor:
            */
            (function () {
              'use strict';
       
              var $lastGroup = $('.sceditor-group').last();
           
              global.button = $('<a>', {
                'class': 'sceditor-button sceditor-button-fontawesome',
                unselectable: 'on',
                title: 'Inserir um ícone da FontAwesome',
                html: '<div unselectable="on">FontAwesome</div>'
              })
                .appendTo($lastGroup)
                  .on('click', function () {
       
                    var $this = $(this);
                    var $pos = $this.offset();
                    var posX = $pos.left;
                    var posY = $pos.top;
                 
                    global.template
                      .toggle()
                        .css({
                          left: posX,
                          top: posY
                        })
                  })
              ;
       
              global.template
                .on('click', function (event) {
                  event.stopPropagation();
                })
              ;
       
              global.button
                .on('click', function (event) {
                  event.stopPropagation();
                })
              ;
       
              $(document)
                .on('click', function () {
                  global.template.hide();
                })
              ;
            }());
       
            /**
            *! Parte 03
            *  Criar os estilos:
            */
            $('<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all" type="text/css">')
              .appendTo('head')
            ;
         
            $('<style>', {
              type: 'text/css',
              text: [
                'table.fa-fontawesome-icon {',
                '  font-size: 1.3em;',
                '}',
                '',
                '.sceditor-button-fontawesome div {',
                '  background-image: url(https://i.imgur.com/c2uMWQs.png) !important;',
                '  background-size: 16px !important;',
                '  background-position: center center !important;',
                '}',
                '',
                '.fontawesome-icons-dropdown {',
                '  margin-top: 26px!important;',
                '  width: 240px;',
                '}',
                '',
                '.fontawesome-icons-dropdown h5 {',
                '  margin: -10px -10px 0 !important;',
                '  padding: 15px;',
                '  padding-right: 10px;',
                '  background-color: #ddd;',
                '  font-weight: normal;',
                '  font-family: "Trebuchet MS", "Verdana", Arial, sans-serif;',
                '  font-size: 15px;',
                '}',
                '',
                '.fontawesome-icons-dropdown form {',
                '  margin: 10px -10px 0 !important;',
                '  padding: 5px 10px;',
                '  border-bottom: solid 1px #ccc;',
                '  box-sizing: border-box;',
                '}',
                '',
                '.fontawesome-icons-dropdown form * {',
                '  box-sizing: border-box;',
                '}',
                '',
                '.fontawesome-icons-dropdown form label {',
                '  display: block !important;',
                '  font-weight: normal !important;',
                '  font-size: 12px;',
                '  margin-bottom: 3px;',
                '  color: #666 !important;',
                '}',
                '',
                '.fontawesome-icons-dropdown form input {',
                '  width: 100%;',
                '}',
                '',
                '.fontawesome-icons-dropdown a {',
                '  font-size: 11px;',
                '  margin-bottom: 7px;',
                '  cursor: pointer;',
                '}',
                '',
                '.fontawesome-icons-dropdown a:last-child {',
                '  margin-bottom: 0px;',
                '}',
                '',
                '.fontawesome-icons-dropdown main {',
                '  margin: 0 -10px -10px !important;',
                '  padding: 10px !important;',
                '  max-height: 240px;',
                '  overflow-y: scroll;',
                '}',
                '',
                '.fontawesome-icons-dropdown a:hover {',
                '  color: #39c;',
                '}',
                '',
                '.fontawesome-icons-dropdown a > span {',
                '  font-family: "Verdana", Arial, sans-serif;',
                '}'
              ].join('\n')
            }).appendTo('head');
          });
        }(jQuery));

Modificări

Puteți modifica următoarele lucruri, după bunul plac:
Pictograme Font Awesome - puteți alege alt titlu pentru căsuța cu iconițe
Cautati pictograma... - puteți alege altă denumire pentru căutare

Rezultat

Dacă ați instalat corect codul, acesta ar trebui să fie rezultatul:
Integrarea Font Awesome ca și buton în SCEditor Fontas10
Asta a fost tot, felicitări! Da
avatar

Kames
Membru onorific
Membru onorific

Mesaje : 78
Varsta : 24
Localizare : Timișoara
Data înscrierii : 11/02/2017
Mulțumiri : 12
Mozilla Firefox AwesomeBB

https://www.wikifg.net
Kames a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum