Содержание

Icons для «ДокуВики»

Предоставляет визуальный интерфейс вставки иконок Font-Awesome, Glyphicons, Material Design Icons, Typicons, Font-Linux и RPG-Awesome. Этот плагин добавляет дополнительную кнопку в редактор страниц. С помощью этой кнопки можно выбирать иконки в визуальном интерфейсе.

Этот плагин был разработан Ди Терлицци.

Совместимость

:!: Примечание: При возникновении ошибки вида Error: Call to undefined function trigger_event() в 2024-02-06 «Kaos» смотрите вариант исправления ниже в разделе Часто задаваемых вопросов.

Монтаж

Используйте менеджер плагинов для установки или…

  1. скачать zip-файл
  2. распаковать его в <dokuwiki>/lib/plugins/
  3. войдите как администратор и измените плагин в менеджере конфигурации

:!: Дополнительные внешние требования: Для этого плагина требуются следующие дополнительные компоненты, которые необходимо установить отдельно:

Примеры/Использование

Посмотрите на плагин в действии здесьздесь. На странице-образце показаны все стили, доступные в плагине.

Простое использование: 

{{icon>home}}

Некоторые более сложные варианты использования: 

{{icon>home?24&circle&padding=10px&background=#DDD&color=#CCC}}
{{fa>home|My Home}}
{{fugue>user?24}}
{{silk>anchor}}
{{flag>no}}
[[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]]
[[https://github.com/LotarProject/dokuwiki-plugin-icons|{{fa>github-square?24|Icons DokuWiki plugin on GitHub}}]]

Синтаксис

Базовый синтаксис

{{icon>icon-name&flags|title}}

Синтаксис ссылки DokuWiki

[[:dokuwiki:page|{{icon>icon-name&flags|title}}]]

Синтаксис внешней ссылки

[[protocol://host/path|{{icon>icon-name&flags|title}}]]

Доступные пакеты иконок

Пакет
icon стандартный набор иконок (см. defaultPack)
fa Font-Awesome font icon
ra RPG-Awesome font icon
glyphicon Glyphicons font icon
typcn Typicons font icon
mdi Material Design Icons font icon
fl Font-Linux font icon
fugue Fugue
oxygen KDE Oxygen
breeze KDE Plasma Breeze

Всплывающий помощник

Icons plugin provide a popup helper to easy add the icons in your page. To open the popup click to DokuWiki icon in the toolbar in edit page.

The popup support this icon packs:

Конфигурация и настройки

Вариант конфигурации Значение по умолчанию Описание
defaultSize 16 Значение по умолчанию, если размер не указан
defaultPack fa Пакет иконок по умолчанию, если не указано иное
loadFontAwesome On Font Awesome : разрешить/запретить загрузку CSS (отключите, если у вас шаблон на основе Bootstrap3)
loadTypicons Off Typicons : включить значок шрифта
loadFontlinux Off Font-Linux : включить значок шрифта
loadMaterialDesignIcons On Иконки материалов : включить значок шрифта
loadRpgAwesome On Font-Linux : включить значок шрифта
fugueURL (CDN URL) Fugue CDN или локальный URL
oxygenURL (CDN URL) KDE Oxygen CDN или локальный URL
breezeURL (CDN URL) KDE Plasma Breeze CDN или локальный URL
silkURL (CDN URL) Silk CDN или локальный URL
flagURL (CDN URL) Флаг CDN или локальный URL

ПРИМЕЧАНИЕ для пакета значков флагов: по умолчанию используются флаги из плагина перевода присутствующего в вашей установке DokuWiki..

Флаги

Флаг Значение Описание
size (см. defaultSizeвариант) Размер значка (в пикселях)
pack (см. defaultPackвариант) Набор иконок (fa, glyphicon, fugue, oxygen)
circle - Создайте круг вокруг значка.
border - Добавьте рамку вокруг значка
borderColor - Установить цветную границу
padding - Применить отступ к иконке (в пикселях)
background - Применить фон к значку (в шестнадцатеричном формате или в виде названия цвета)
color - Применить цвет к значку (в шестнадцатеричном формате или в виде названия цвета)
class - Добавляет дополнительные CSS- классы к значку (полезно для Font Awesome или Glyphicon)
align left|center|right Выровнять значок ( по левому краю , по правому краю или по центру)
left - Выровнять значок по левому краю
right - Выровнять значок по правому краю
center - Выровнять значок по центру

Флаги Font Awesome

Флаг Значение Описание
lg - Увеличение размера иконки на 33%
2x|3x|4x|5x - Увеличить размер значка
border - Добавить границу к значку
spin - Добавить анимацию вращения
pulse - Добавить анимацию пульса
rotate 90|180|270 Повернуть значок
flip horizontal|vertical Перевернуть значок
pull-left - Потяните значок влево
pull-right - Потяните значок вправо

Демо

Демонстрация и примеры доступны по адресу http://www.lotar.altervista.org/dokuwiki/wiki/plugin/icons.

Часто задаваемые вопросы

Как установить Font Awesome и Glyphicon в портативную версию Dokuwiki?

Первый шаг, скачайте пакет Font Awesome и создайте в вашей установке DokuWiki каталог (например, assets/font-awesome) и поместите все файлы. Следующий шаг в Configuration Manager, установите loadFontAwesome и введите url вашего локального пакета font awesome в fontAwesomeURL (например, /dokuwiki/assets/font-awesome/css/font-awesome.min.css).

Не работает ли плагин-помощник?

Это происходит потому, что скрипт, который использует jQuery в /lib/plugins/icons/exe/popup.php, вызывает jQuery до загрузки jQuery. Весь jQuery встроен с тегом defer, поэтому и возникает эта ошибка.

безопасное решение:

  1. сделайте резервную копию popup.php
  2. скопируйте скрипт, который находится внутри popup.php (скрипт для справки находится внизу этого комментария)
  3. создайте файл popup_script.js в том же каталоге и вставьте в него этот скопированный скрипт
  4. удалите этот скрипт из popup.php.
  5. на место удаленного скрипта вставте скрипт следующего вида <script src=«/lib/plugins/icons/exe/popup_script.js» defer=«defer»></script>
  6. и сохраните.

примечание: браузер игнорирует, defer если <script> не имеет src директивы. Вот о чем эта суета. Скрипт для вставки в popup.php: 

<script src="/lib/plugins/icons/exe/popup_script.js" defer="defer"></script>

перезагрузите страницу, вызовите всплывающее меню, теперь все работает.

Скрипт для справки:

popup_script.js
jQuery(document).ready(function() {
 
      var is_bootstrap = (typeof jQuery.fn.modal !== "undefined");
 
      var $icon_pack    = jQuery('#icon_pack'),
          $icon_name    = jQuery('#icon_name'),
          $icon_size    = jQuery('#icon_size'),
          $icon_align   = jQuery('#icon_align'),
          $output       = jQuery('#output'),
          $preview      = jQuery('#preview');
 
      if (! is_bootstrap) {
        jQuery('.tab-pane').hide();
      }
 
      jQuery('button[data-icon-size]').on('click', function() {
 
        jQuery('button[data-icon-size]').removeClass('active');
        jQuery(this).addClass('active');
 
        $icon_size.val(jQuery(this).data('icon-size'));
        jQuery(document).trigger('popup:build');
 
      });
 
      jQuery('button[data-icon-align]').on('click', function() {
 
        jQuery('button[data-icon-align]').removeClass('active');
        jQuery(this).addClass('active');
 
        $icon_align.val(jQuery(this).data('icon-align'));
        jQuery(document).trigger('popup:build');
 
      });
 
      jQuery('ul.nav a').on('click', function() {
 
        if (! is_bootstrap) {
          jQuery('.tab-pane').hide();
          jQuery('ul.nav li.active').removeClass('active');
          jQuery(jQuery(this).attr('href')).show();
          jQuery(this).parent().addClass('active');
        }
 
        $icon_pack.val(jQuery(this).data('pack'));
        jQuery('.preview-box').removeClass('hide');
 
        jQuery(document).trigger('popup:reset');
 
      });
 
      jQuery('.btn-icon').on('click', function() {
        $icon_name.val(jQuery(this).data('icon-name'));
        jQuery(document).trigger('popup:build');
      });
 
      jQuery(document).on('popup:build', function() {
 
        var icon_pack  = $icon_pack.val(),
            icon_size  = $icon_size.val(),
            icon_align = $icon_align.val(),
            icon_name  = $icon_name.val();
 
        if (! icon_name) {
          return false;
        }
 
        var syntax = [ '{{' ];
 
        syntax.push(icon_pack);
        syntax.push('>' + icon_name);
 
        var icon_size_pixel = 0;
 
        switch (icon_size) {
          case 'small':
            icon_size_pixel = 24;
            break;
          case 'medium':
            icon_size_pixel = 32;
            break;
          case 'large':
            icon_size_pixel = 48;
            break;
        }
 
        if (icon_size_pixel) {
          syntax.push('?' + icon_size_pixel);
        }
 
        if (icon_align) {
          syntax.push('&align=' + icon_align);
        }
 
        syntax.push('}}');
 
        $output.val(syntax.join(''));
        $preview.text(syntax.join(''));
 
      });
 
      jQuery('#btn-reset').on('click', function() {
        jQuery(document).trigger('popup:reset');
      });
 
      jQuery(document).on('popup:reset', function() {
        jQuery('form').each(function(){
          jQuery(this)[0].reset();
        });
        $output.val('');
        $preview.text('');
      });
 
      jQuery('#btn-preview, #btn-insert').on('click', function() {
 
        if (jQuery(this).attr('id') === 'btn-insert') {
          opener.insertAtCarret('wiki__text', $output.val());
          opener.focus();
        }
 
      });
 
    });

Ссылка на решение проблеммы на форуме wiki

Альтернативный способ

Настройка и поддержка Fontawesome 6.71

jasonwch модифицировал этот плагин для поддержки последнего набора иконок Fontawesome 6.71.

P.S. Этот ZIP-архив содержит ТОЛЬКО измененные/добавленные файлы. ОБЯЗАТЕЛЬНО установите оригинальный плагин, а затем замените/добавьте эти файлы. dw_icons_fa6.zip

Что изменено в модифицированной версии:

Техническое примечание:

  1. Я использовал Node.js для извлечения нового имени значка в виде списка для замены оригинального list-font-awesome.php ( https://github.com/mackilroy007/font-awesome-v6 )
  1. добавлены строки комментариев в измененных файлах, чтобы вам было легче проверить, какая строка была изменена.

Ссылка на оригинальный текст icons_plugens_new.rar

Ошибка вида Error: Call to undefined function trigger_event()

Данная ошибка может возникнуть при обновлении dokuwiki с 2023-04-04 «Jack Jackrum» на 2024-02-06 «Kaos» и означает Вызов неопределенной функции trigger_event().

popur.php 
  1. $tmp = array();
  2. trigger_event('MEDIAMANAGER_STARTED', $tmp);
  3. session_write_close();  //close session

безопасное решение:
в начале добавляем класс Event use dokuwiki\Extension\Event;

popur.php 
  1. require_once(DOKU_INC.'inc/init.php');
  2. require_once(DOKU_INC.'inc/template.php');
  3. require_once(DOKU_INC.'inc/lang/en/lang.php');
  4. require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');
  5. use dokuwiki\Extension\Event;

Меняем код вызова функции trigger_event('MEDIAMANAGER_STARTED', $tmp); на Event::createAndTrigger('MEDIAMANAGER_STARTED', $tmp);

popur.php 
  1. $tmp = array();
  2. Event::createAndTrigger('MEDIAMANAGER_STARTED', $tmp);
  3. session_write_close();  //close session

Сохраняем, очищаем кэш local.php и перегружаем страницу редактора dokuwiki в раскрывшемся окне выбираем понравившуюся иконку и вставляем в тело страницы

«См.подробности редактирования файла popur.php»
popur.php 
  1. <?php
  2. /**
  3.  * Plugin Icons: Popup helper
  4.  * 
  5.  * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
  6.  * @author     Giuseppe Di Terlizzi <giuseppe.diterlizzi@gmail.com>
  7.  * @copyright  (C) 2015-2019, Giuseppe Di Terlizzi
  8.  */
  9.  
  10. if (!defined('DOKU_INC')) define('DOKU_INC', dirname(__FILE__).'/../../../../');
  11. define('DOKU_MEDIAMANAGER', 1); // needed to get proper CSS/JS
  12.  
  13. global $lang;
  14. global $conf;
  15. global $JSINFO;
  16.  
  17. require_once(DOKU_INC.'inc/init.php');
  18. require_once(DOKU_INC.'inc/template.php');
  19. require_once(DOKU_INC.'inc/lang/en/lang.php');
  20. require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');
  21. use dokuwiki\Extension\Event;
  22. $JSINFO['id']        = '';
  23. $JSINFO['namespace'] = '';
  24.  
  25. $tmp = array();
  26. Event::createAndTrigger('MEDIAMANAGER_STARTED', $tmp);
  27. session_write_close();  //close session
  28.  
  29.  
  30. $icons_plugin = plugin_load('action','icons');
  31.  
  32. $use_font_awesome          = $icons_plugin->getConf('loadFontAwesome');
  33. $use_material_design_icons = $icons_plugin->getConf('loadMaterialDesignIcons');
  34. $use_typicons              = $icons_plugin->getConf('loadTypicons');
  35. $use_font_linux            = $icons_plugin->getConf('loadFontlinux');
  36. $use_rpg_awesome           = $icons_plugin->getConf('loadRpgAwesome');
  37. $use_glyphicons            = false;
  38.  
  39. # Load Bootstrap3 Template assets
  40. if ($conf['template'] == 'bootstrap3') {
  41.  
  42.   include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_functions.php');
  43.   include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_global.php');
  44.  
  45.   # Glyphicons is bundled into Bootstrap 3.x
  46.   $use_glyphicons = true;
  47.  
  48. }
  49.  
  50. $list_material_design_icons = include(dirname(__FILE__) . '/list-material-design-icons.php');
  51. $list_font_awesome          = include(dirname(__FILE__) . '/list-font-awesome.php');
  52. # add V6 brand icons
  53. $list_font_awesome_br       = include(dirname(__FILE__) . '/list-font-awesome-br.php');
  54. # add V6 brand icons 
  55. $list_glyphicon             = include(dirname(__FILE__) . '/list-glyphicon.php');
  56. $list_typicons              = include(dirname(__FILE__) . '/list-typicons.php');
  57. $list_font_linux            = include(dirname(__FILE__) . '/list-font-linux.php');
  58. $list_rpg_awesome           = include(dirname(__FILE__) . '/list-rpg-awesome.php');
  59.  
  60. header('Content-Type: text/html; charset=utf-8');
  61. header('X-UA-Compatible: IE=edge,chrome=1');
  62.  
  63. ?><!DOCTYPE html>
  64. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang'] ?>" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
  65. <head>
  66.   <meta charset="UTF-8" />
  67.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  68.   <title>Icons Plugin</title>
  69.   <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
  70.   <meta name="viewport" content="width=device-width,initial-scale=1" />
  71.   <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
  72.   <?php tpl_metaheaders() ?>
  73.   <style type="text/css">
  74.     body { padding: 20px; }
  75.     .btn-icon { margin: 4px; padding: 4px; }
  76.     .tab-icons { overflow-y: auto; height: 300px; }
  77.     .icon { font-size: 2em; width: 1.28571429em;
  78.  text-align: center; }
  79.     <?php if (! $use_glyphicons): ?>
  80.     footer { bottom: 20px; position: fixed; }
  81.     .col-sm-6 { width:50%; float: left; }
  82.     .col-sm-4 { width:33.3%; float: left; }
  83.     .tab-pane, .hide { display: none; }
  84.     button.active { border-style: inset; }
  85.     <?php endif; ?>
  86.   </style>
  87. <!-- <script type="text/javascript"> -->
  88.  
  89. <script src="popup_script.js" defer="defer"></script>
  90. <!--  </script> -->
  91. </head>
  92. <body class="container-fluid dokuwiki">
  93.  
  94.   <ul class="tabs nav nav-tabs" role="tablist">
  95.  
  96.     <?php if ($use_font_awesome): ?>
  97. 	<!-- add FA6 brand icons + modify naming -->
  98.     <li>
  99.       <a data-toggle="tab" href="#tab-font-awesome" data-pack="fa">FA-Solid</a>
  100.     </li>
  101. 	<li>
  102.       <a data-toggle="tab" href="#tab-font-awesome-br" data-pack="fab">FA-Brands</a>
  103.     </li>
  104. 	<!-- add FA6 brand icons -->
  105.     <?php endif; ?>
  106.     <?php if ($use_glyphicons): ?>
  107.     <li>
  108.       <a data-toggle="tab" href="#tab-glyphicon" data-pack="glyphicon">Glyphicons</a>
  109.     </li>
  110.     <?php endif; ?>
  111.     <?php if ($use_material_design_icons): ?>
  112.     <li>
  113.       <a data-toggle="tab" href="#tab-mdi" data-pack="mdi">Material Design Icons</a>
  114.     </li>
  115.     <?php endif; ?>
  116.     <?php if ($use_typicons): ?>
  117.     <li>
  118.       <a data-toggle="tab" href="#tab-typicons" data-pack="typcn">Typicons</a>
  119.     </li>
  120.     <?php endif; ?>
  121.     <?php if ($use_font_linux): ?>
  122.     <li>
  123.       <a data-toggle="tab" href="#tab-font-linux" data-pack="fl">Font-Linux</a>
  124.     </li>
  125.     <?php endif; ?>
  126.     <?php if ($use_rpg_awesome): ?>
  127.     <li>
  128. 	 <!-- bug fix for wrong tag of RPG-Awesome
  129.      <a data-toggle="tab" href="#tab-rpg-awesome" data-pack="fa">RPG-Awesome</a> -->
  130. 	 <a data-toggle="tab" href="#tab-rpg-awesome" data-pack="ra">RPG-Awesome</a>
  131.     </li>
  132.     <?php endif; ?>
  133.  
  134. <!-- add guideling page -->
  135. 	<li>
  136. 	 <a data-toggle="tab" href="#tab-guide" data-pack="">Guide</a>
  137.     </li>
  138. <!-- add guideling page -->
  139.   </ul>
  140.  
  141.   <main class="tab-content">
  142.  
  143. <!-- add guideling page -->
  144.     <div id="tab-guide" class="tab-pane fade">
  145. <p>
  146. <table>
  147.     <thead>
  148.         <tr>
  149.             <th>Flag</th>
  150.             <th>Flag (FA)</th>
  151.             <th>Values</th>
  152.             <th>Description </th>
  153.         </tr>
  154.     </thead>
  155.     <tbody>
  156.         <tr>
  157.             <td>size</td>
  158.             <td>-</td>
  159.             <td>(see&nbsp;defaultSize&nbsp;option)</td>
  160.             <td>Size of icon (in pixel) </td>
  161.         </tr>
  162.         <tr>
  163.             <td>pack</td>
  164.             <td>-</td>
  165.             <td>(see&nbsp;defaultPack&nbsp;option)</td>
  166.             <td>Icon pack (fa, glyphicon, fugue, oxygen)</td>
  167.             <td>
  168.             </td>
  169.         </tr>
  170.         <tr>
  171.             <td>circle</td>
  172.             <td>-</td>
  173.             <td>-</td>
  174.             <td>Create a&nbsp;circle&nbsp;around the icon </td>
  175.         </tr>
  176.         <tr>
  177.             <td>border</td>
  178.             <td>-</td>
  179.             <td>-</td>
  180.             <td>Add a&nbsp;border&nbsp;around the icon </td>
  181.         </tr>
  182.         <tr>
  183.             <td>borderColor</td>
  184.             <td>-</td>
  185.             <td>-</td>
  186.             <td>Set the color border </td>
  187.         </tr>
  188.         <tr>
  189.             <td>padding</td>
  190.             <td>-</td>
  191.             <td>-</td>
  192.             <td>Apply a&nbsp;padding&nbsp;to the icon (in pixel) </td>
  193.         </tr>
  194.         <tr>
  195.             <td>background</td>
  196.             <td>-</td>
  197.             <td>-</td>
  198.             <td>Apply a&nbsp;background&nbsp;to the icon (in hex or color name) </td>
  199.         </tr>
  200.         <tr>
  201.             <td>color</td>
  202.             <td>-</td>
  203.             <td>-</td>
  204.             <td>Apply a&nbsp;color&nbsp;to the icon (in hex or color name) </td>
  205.         </tr>
  206.         <tr>
  207.             <td>class</td>
  208.             <td>-</td>
  209.             <td>-</td>
  210.             <td>Adds additional&nbsp;CSS&nbsp;classes to the icon (useful for Font Awesome or Glyphicon) </td>
  211.         </tr>
  212.         <tr>
  213.             <td>align</td>
  214.             <td>-</td>
  215.             <td>left|center|right</td>
  216.             <td>Align icon (left,&nbsp;right&nbsp;or&nbsp;center)</td>
  217.             <td>
  218.             </td>
  219.         </tr>
  220.         <tr>
  221.             <td>left</td>
  222.             <td>-</td>
  223.             <td>-</td>
  224.             <td>Align icon to&nbsp;left </td>
  225.         </tr>
  226.         <tr>
  227.             <td>right</td>
  228.             <td>-</td>
  229.             <td>-</td>
  230.             <td>Align icon to&nbsp;right </td>
  231.         </tr>
  232.         <tr>
  233.             <td>center</td>
  234.             <td>-</td>
  235.             <td>-</td>
  236.             <td>Align icon to&nbsp;center </td>
  237.         </tr>
  238.         <tr>
  239.             <td>-</td>
  240.             <td>lg</td>
  241.             <td>-</td>
  242.             <td>Increase of 33% the size of icon </td>
  243.         </tr>
  244.         <tr>
  245.             <td>-</td>
  246.             <td>2x|3x|4x|5x</td>
  247.             <td>-</td>
  248.             <td>Increase the size of icon </td>
  249.         </tr>
  250.         <tr>
  251.             <td>-</td>
  252.             <td>border</td>
  253.             <td>-</td>
  254.             <td>Add border to icon </td>
  255.         </tr>
  256.         <tr>
  257.             <td>-</td>
  258.             <td>spin</td>
  259.             <td>-</td>
  260.             <td>Add spin animation </td>
  261.         </tr>
  262.         <tr>
  263.             <td>-</td>
  264.             <td>pulse</td>
  265.             <td>-</td>
  266.             <td>Add pulse animation </td>
  267.         </tr>
  268.         <tr>
  269.             <td>-</td>
  270.             <td>rotate</td>
  271.             <td>90|180|270</td>
  272.             <td>Rotate the icon </td>
  273.         </tr>
  274.         <tr>
  275.             <td>-</td>
  276.             <td>flip</td>
  277.             <td>horizontal|vertical</td>
  278.             <td>Flip the icon </td>
  279.         </tr>
  280.         <tr>
  281.             <td>-</td>
  282.             <td>pull-left</td>
  283.             <td>-</td>
  284.             <td>Pull the icon to left </td>
  285.         </tr>
  286.         <tr>
  287.             <td>-</td>
  288.             <td>pull-right</td>
  289.             <td>-</td>
  290.             <td>Pull the icon to right </td>
  291.         </tr>
  292.         <tr></tr>
  293.     </tbody>
  294. </table>
  295.  
  296.  
  297.     </div>
  298. <!-- add guideling page -->
  299.  
  300.  
  301.  
  302.     <div id="tab-font-awesome" class="tab-pane fade">
  303.  
  304.       <div class="row tab-icons">
  305.         <?php foreach($list_font_awesome as $icon): ?>
  306.           <div class="col-sm-4">
  307.             <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  308. 			<!-- modify FA6 new coding
  309.               <i class="fa fa-fw fa-2x fa-<?php echo $icon ?>"></i>
  310. 			  -->
  311. 			  <i class="fa-solid fa-fw fa-2x fa-<?php echo $icon ?>"></i>
  312.             </button>
  313.             <small><?php echo $icon ?></small>
  314.           </div>
  315.         <?php endforeach ?>
  316.       </div>
  317.  
  318.     </div>
  319. <!-- add FA6 brand icons -->
  320. 	<div id="tab-font-awesome-br" class="tab-pane fade">
  321.  
  322.       <div class="row tab-icons">
  323.         <?php foreach($list_font_awesome_br as $icon): ?>
  324.           <div class="col-sm-4">
  325.             <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  326.               <i class="fa-brands fa-fw fa-2x fa-<?php echo $icon ?>"></i>
  327.             </button>
  328.             <small><?php echo $icon ?></small>
  329.           </div>
  330.         <?php endforeach ?>
  331.       </div>
  332.     </div>
  333. <!-- add FA6 brand icons -->
  334.  
  335.     <div id="tab-rpg-awesome" class="tab-pane fade">
  336.  
  337.       <div class="row tab-icons">
  338.         <?php foreach($list_rpg_awesome as $icon): ?>
  339.           <div class="col-sm-4">
  340.             <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  341.               <i class="ra ra-fw ra-2x ra-<?php echo $icon ?>"></i>
  342.             </button>
  343.             <small><?php echo $icon ?></small>
  344.           </div>
  345.         <?php endforeach ?>
  346.       </div>
  347.  
  348.     </div>
  349.  
  350.     <div id="tab-mdi" class="tab-pane fade">
  351.  
  352.       <div class="row tab-icons">
  353.         <?php foreach($list_material_design_icons as $icon): ?>
  354.           <div class="col-sm-4">
  355.             <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  356.               <i class="icon mdi mdi-<?php echo $icon ?>"></i>
  357.             </button>
  358.             <small><?php echo $icon ?></small>
  359.           </div>
  360.         <?php endforeach ?>
  361.       </div>
  362.  
  363.     </div>
  364.  
  365.     <div id="tab-glyphicon" class="tab-pane fade">
  366.  
  367.       <div class="row tab-icons">
  368.         <?php foreach($list_glyphicon as $icon): ?>
  369.           <div class="col-sm-4">
  370.             <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  371.               <i class="icon glyphicon glyphicon-<?php echo $icon ?>"></i>
  372.             </button>
  373.             <small><?php echo $icon ?></small>
  374.           </div>
  375.         <?php endforeach ?>
  376.       </div>
  377.  
  378.     </div>
  379.  
  380.     <div id="tab-typicons" class="tab-pane fade">
  381.  
  382.       <div class="row tab-icons">
  383.         <?php foreach($list_typicons as $icon): ?>
  384.           <div class="col-sm-4">
  385.             <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  386.               <i class="fa-fw fa-2x typcn typcn-<?php echo $icon ?>"></i>
  387.             </button>
  388.             <small><?php echo $icon ?></small>
  389.           </div>
  390.         <?php endforeach ?>
  391.       </div>
  392.  
  393.     </div>
  394.  
  395.     <div id="tab-font-linux" class="tab-pane fade">
  396.  
  397.       <div class="row tab-icons">
  398.         <?php foreach($list_font_linux as $icon): ?>
  399.           <div class="col-sm-4">
  400.             <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
  401.               <i class="icon fl fl-<?php echo $icon ?>"></i>
  402.             </button>
  403.             <small><?php echo $icon ?></small>
  404.           </div>
  405.         <?php endforeach ?>
  406.       </div>
  407.  
  408.     </div>
  409.  
  410.     <div class="preview-box hide">
  411.  
  412.       <hr/>
  413.  
  414.       <div class="row">
  415.  
  416.         <div class="box-alignment col-sm-6">
  417.           <label>Alignment</label>
  418.           <div class="btn-group btn-group-xs">
  419.             <button class="button btn btn-default active" data-icon-align="" title="Use no align">
  420.               <img src="../../../images/media_align_noalign.png" />
  421.             </button><button class="button btn btn-default" data-icon-align="left" title="Align the icon on the left">
  422.               <img src="../../../images/media_align_left.png" />
  423.             </button><button class="button btn btn-default" data-icon-align="center" title="Align the icon in the center">
  424.               <img src="../../../images/media_align_center.png" />
  425.             </button><button class="button btn btn-default" data-icon-align="right" title="Align the icon on the right">
  426.               <img src="../../../images/media_align_right.png" />
  427.             </button>
  428.           </div>
  429.         </div>
  430.  
  431.         <div class="box-size col-sm-6">
  432.           <label>Image size</label>
  433.           <div class="btn-group btn-group-xs">
  434.             <button class="button btn btn-default" data-icon-size="small" title="Small size">
  435.               <img src="../../../images/media_size_small.png" />
  436.             </button><button class="button btn btn-default" data-icon-size="medium" title="Medium size">
  437.               <img src="../../../images/media_size_medium.png" />
  438.             </button><button class="button btn btn-default" data-icon-size="large" title="Large size">
  439.               <img src="../../../images/media_size_large.png" />
  440.             </button><button class="button btn btn-default active" data-icon-size="original" title="Original size">
  441.               <img src="../../../images/media_size_original.png" />
  442.             </button>
  443.           </div>
  444.         </div>
  445.  
  446.       </div>
  447.  
  448.       <p>&nbsp;</p>
  449.  
  450.       <label>Preview</label>
  451.       <pre id="preview"></pre>
  452.  
  453.       <input type="hidden" id="output" />
  454.       <input type="hidden" id="icon_pack" />
  455.       <input type="hidden" id="icon_name" />
  456.       <input type="hidden" id="icon_size" />
  457.       <input type="hidden" id="icon_align" />
  458.  
  459.     </div>
  460.  
  461.   </main>
  462.  
  463.   <footer>
  464.     <nav class="navbar navbar-default navbar-fixed-bottom">
  465.       <div class="container-fluid">
  466.         <div class="navbar-text">
  467.           <button type="button" id="btn-preview" class="hidden btn btn-default">Preview code</button>
  468.           <button type="button" id="btn-insert" class="btn btn-success">Insert</button>
  469.           <button type="button" id="btn-reset" class="btn btn-default">Reset</button>
  470.         </div>
  471.       </div>
  472.     </nav>
  473.   </footer>
  474.  
  475. </body>
  476. </html>

Обновление

Для обновления удалите исходную папку lib/plugins/icons и установите новую версию, как указано выше.

Файл для загрузки

FortAwesome/Шрифт-Awesome Выпуск 6.7.2

Лицензия