======Icons для «ДокуВики»======
{{:wiki:plugin:dwplugin.png?70 |}} Предоставляет визуальный интерфейс вставки иконок Font-Awesome, 
Glyphicons, Material Design Icons, Typicons, Font-Linux и RPG-Awesome.
Этот плагин добавляет дополнительную кнопку в редактор страниц. С помощью этой кнопки можно выбирать иконки в визуальном интерфейсе.

Этот плагин был разработан Ди Терлицци.
  * **Релиз:** 2024-10-30. 
  * **Репозиторий:**https://github.com/LotarProject/dokuwiki-plugin-icons/
  * **Совместимость с «Докувики»:** 04.04.2023 "Джек Джекрам" 

=====Совместимость=====
  * 2024-02-06 "Kaos" да
  * 2023-04-04 "Jack Jackrum" да
  * 2022-07-31 "Igor" да
  * 2020-07-29 "Hogfather" да
:!: **Примечание:** При возникновении ошибки вида <fc #fa8072>**Error: Call to undefined function trigger_event()**</fc> в 2024-02-06 "Kaos" смотрите вариант исправления ниже в разделе [[wiki:plugin:icons#Часто задаваемые вопросы|Часто задаваемых вопросов]].
=====Монтаж=====
Используйте менеджер плагинов для установки или…

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

:!: **Дополнительные внешние требования:** Для этого плагина требуются следующие дополнительные компоненты, которые необходимо установить отдельно:
  * [[http://fontawesome.io/|Font Awesome]]
  * [[http://getbootstrap.com|Glyphicons from Twitter Bootstrap]]

=====Примеры/Использование=====
Посмотрите на плагин в действии [[http://lotar.altervista.org/dokuwiki/wiki/plugin/icons|здесь]]здесь. На странице-образце показаны все стили, доступные в плагине.
{{:wiki:plugin:plugens_icon_4.jpg?|}}

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

  {{icon>home}}


Некоторые более сложные варианты использования:
<code>
{{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}}]]  
</code>
{{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}}]]  

===== Синтаксис =====

=== Базовый синтаксис ===
<code>{{icon>icon-name&flags|title}}</code>

=== Синтаксис ссылки DokuWiki ===
<code>[[:dokuwiki:page|{{icon>icon-name&flags|title}}]]</code>

=== Синтаксис внешней ссылки ===
<code>[[protocol://host/path|{{icon>icon-name&flags|title}}]]</code>

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

^ Пакет ^^^
| ''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 | |


=== Всплывающий помощник ===
{{ http://lotar.altervista.org/wiki/_media/wiki/plugin/icons-popup.png?200}} 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:

  * Font-Awesome
  * RPG-Awesome
  * Typicons
  * Material Design Icons
  * Glyphicons

=====Конфигурация и настройки=====
^ Вариант конфигурации ^ Значение по умолчанию ^ Описание ^
^ ''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 |

**ПРИМЕЧАНИЕ для пакета значков флагов**: по умолчанию используются флаги из [[:plugin:translation|плагина перевода]] присутствующего в вашей установке 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, поэтому и возникает эта ошибка.

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

  - сделайте резервную копию popup.php
  - скопируйте скрипт, который находится внутри **popup.php** (скрипт для справки находится внизу этого комментария)
  - создайте файл **popup_script.js** в том же каталоге и вставьте в него этот скопированный скрипт
  - удалите этот скрипт из **popup.php**.
  - на место удаленного скрипта вставте скрипт следующего вида **<script src="/lib/plugins/icons/exe/popup_script.js" defer="defer"></script>**
  - и сохраните.
примечание: браузер игнорирует, ''defer'' если ''<script>'' не имеет ''src'' директивы. Вот о чем эта суета.
Скрипт для вставки в **popup.php**:
<code php>
<script src="/lib/plugins/icons/exe/popup_script.js" defer="defer"></script>
</code>
перезагрузите страницу, вызовите всплывающее меню, теперь все работает.

Скрипт для справки:
<code php 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();
        }

      });

    });
</code>

[[https://github.com/giterlizzi/dokuwiki-plugin-icons/issues/26#issuecomment-1475016611|Ссылка на решение проблеммы на форуме wiki]]

===Альтернативный способ===
  * {{ :wiki:plugin:popup.zip |загрузить измененный popup.php и файл popup_script.js}}
  * распакуйте в папку ''/lib/plugins/icons/exe/'' с заменой файлов.
===Настройка и поддержка Fontawesome 6.71===
[[https://github.com/jasonwch|jasonwch]] модифицировал этот плагин для поддержки последнего набора иконок Fontawesome 6.71.

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

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

  * заменен набор иконок на Fontawesome 6.71. Поскольку 6.71 отделил иконки брендов, для таких иконок есть дополнительная вкладка/префикс
  * 
  * (должно быть) совместимым с уже добавленными значками FA из предыдущей версии, поэтому старые страницы не нужно обновлять вручную
  * 
  * добавить дополнительную вкладку руководства во всплывающем окне для более удобного использования тегов
  * 
  * В сочетании с исправлением js defer, оригинальный скрипт расширения должен отключить defer JS со страницы конфигурации для работы. Из [[https://github.com/giterlizzi/dokuwiki-plugin-icons/issues/26|issue#26]], "inbsp" предоставил исправление для разделения JS, чтобы исправить эту ошибку. Однако, когда всплывающее окно появляется, вам все равно нужно переключить страницу один раз, чтобы отобразить значки.

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

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

  - добавлены строки комментариев в измененных файлах, чтобы вам было легче проверить, какая строка была изменена.
[[https://github.com/giterlizzi/dokuwiki-plugin-icons/issues/32|Ссылка на оригинальный текст]]
{{ :wiki:plugin:icons_plugens_new.rar |}}
==== Ошибка вида Error: Call to undefined function trigger_event() ====
{{:wiki:plugin:plugin_icons_error_edit_1.png?|}}
Данная ошибка может возникнуть при обновлении dokuwiki с 2023-04-04 «Jack Jackrum» на 2024-02-06 «Kaos» и означает ''Вызов неопределенной функции trigger_event()''.
  * Имя класса ''dokuwiki\Extension\Event''
  * Публичный метод ''trigger()''- автоматическая сигнализация событий. Этот метод принимает два необязательных параметра: действие по умолчанию (обратный вызов) и то, можно ли его предотвратить (bool), и возвращает результаты события. Он отслеживает весь процесс события, сигнализируя совет «ДО», запуская действие по умолчанию и сигнализируя совет «ПОСЛЕ».
<code php popur.php [enable_line_numbers="true", start_line_numbers_at="25"]>
$tmp = array();
trigger_event('MEDIAMANAGER_STARTED', $tmp);
session_write_close();  //close session
</code>
**безопасное решение**:\\  
в начале добавляем класс Event ''use dokuwiki\Extension\Event;''
<code php popur.php [enable_line_numbers="true", start_line_numbers_at="17",highlight_lines_extra="5"]>
require_once(DOKU_INC.'inc/init.php');
require_once(DOKU_INC.'inc/template.php');
require_once(DOKU_INC.'inc/lang/en/lang.php');
require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');
use dokuwiki\Extension\Event;

</code>
Меняем код вызова функции ''%%trigger_event('MEDIAMANAGER_STARTED', $tmp);%%'' на  ''%%Event::createAndTrigger('MEDIAMANAGER_STARTED', $tmp);%%''
<code php popur.php [enable_line_numbers="true", start_line_numbers_at="25",highlight_lines_extra="2"]>
$tmp = array();
Event::createAndTrigger('MEDIAMANAGER_STARTED', $tmp);
session_write_close();  //close session

</code>
Сохраняем, очищаем кэш local.php и перегружаем страницу редактора dokuwiki
{{:wiki:plugin:plugin_icons_error_edit_2.png?|}}
в раскрывшемся окне выбираем понравившуюся иконку и вставляем в тело страницы
{{:wiki:plugin:plugin_icons_error_edit_3.png?|}} 
<details><summary>«См.подробности редактирования файла popur.php»</summary>
<code php popur.php [enable_line_numbers="true"]>
<?php
/**
 * Plugin Icons: Popup helper
 * 
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Giuseppe Di Terlizzi <giuseppe.diterlizzi@gmail.com>
 * @copyright  (C) 2015-2019, Giuseppe Di Terlizzi
 */

if (!defined('DOKU_INC')) define('DOKU_INC', dirname(__FILE__).'/../../../../');
define('DOKU_MEDIAMANAGER', 1); // needed to get proper CSS/JS

global $lang;
global $conf;
global $JSINFO;

require_once(DOKU_INC.'inc/init.php');
require_once(DOKU_INC.'inc/template.php');
require_once(DOKU_INC.'inc/lang/en/lang.php');
require_once(DOKU_INC.'inc/lang/'.$conf['lang'].'/lang.php');
use dokuwiki\Extension\Event;
$JSINFO['id']        = '';
$JSINFO['namespace'] = '';

$tmp = array();
Event::createAndTrigger('MEDIAMANAGER_STARTED', $tmp);
session_write_close();  //close session


$icons_plugin = plugin_load('action','icons');

$use_font_awesome          = $icons_plugin->getConf('loadFontAwesome');
$use_material_design_icons = $icons_plugin->getConf('loadMaterialDesignIcons');
$use_typicons              = $icons_plugin->getConf('loadTypicons');
$use_font_linux            = $icons_plugin->getConf('loadFontlinux');
$use_rpg_awesome           = $icons_plugin->getConf('loadRpgAwesome');
$use_glyphicons            = false;

# Load Bootstrap3 Template assets
if ($conf['template'] == 'bootstrap3') {

  include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_functions.php');
  include_once(DOKU_INC.'lib/tpl/bootstrap3/tpl_global.php');

  # Glyphicons is bundled into Bootstrap 3.x
  $use_glyphicons = true;

}

$list_material_design_icons = include(dirname(__FILE__) . '/list-material-design-icons.php');
$list_font_awesome          = include(dirname(__FILE__) . '/list-font-awesome.php');
# add V6 brand icons
$list_font_awesome_br       = include(dirname(__FILE__) . '/list-font-awesome-br.php');
# add V6 brand icons 
$list_glyphicon             = include(dirname(__FILE__) . '/list-glyphicon.php');
$list_typicons              = include(dirname(__FILE__) . '/list-typicons.php');
$list_font_linux            = include(dirname(__FILE__) . '/list-font-linux.php');
$list_rpg_awesome           = include(dirname(__FILE__) . '/list-rpg-awesome.php');

header('Content-Type: text/html; charset=utf-8');
header('X-UA-Compatible: IE=edge,chrome=1');

?><!DOCTYPE html>
<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">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Icons Plugin</title>
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
  <?php tpl_metaheaders() ?>
  <style type="text/css">
    body { padding: 20px; }
    .btn-icon { margin: 4px; padding: 4px; }
    .tab-icons { overflow-y: auto; height: 300px; }
    .icon { font-size: 2em; width: 1.28571429em;
 text-align: center; }
    <?php if (! $use_glyphicons): ?>
    footer { bottom: 20px; position: fixed; }
    .col-sm-6 { width:50%; float: left; }
    .col-sm-4 { width:33.3%; float: left; }
    .tab-pane, .hide { display: none; }
    button.active { border-style: inset; }
    <?php endif; ?>
  </style>
<!-- <script type="text/javascript"> -->

<script src="popup_script.js" defer="defer"></script>
<!--  </script> -->
</head>
<body class="container-fluid dokuwiki">

  <ul class="tabs nav nav-tabs" role="tablist">

    <?php if ($use_font_awesome): ?>
	<!-- add FA6 brand icons + modify naming -->
    <li>
      <a data-toggle="tab" href="#tab-font-awesome" data-pack="fa">FA-Solid</a>
    </li>
	<li>
      <a data-toggle="tab" href="#tab-font-awesome-br" data-pack="fab">FA-Brands</a>
    </li>
	<!-- add FA6 brand icons -->
    <?php endif; ?>
    <?php if ($use_glyphicons): ?>
    <li>
      <a data-toggle="tab" href="#tab-glyphicon" data-pack="glyphicon">Glyphicons</a>
    </li>
    <?php endif; ?>
    <?php if ($use_material_design_icons): ?>
    <li>
      <a data-toggle="tab" href="#tab-mdi" data-pack="mdi">Material Design Icons</a>
    </li>
    <?php endif; ?>
    <?php if ($use_typicons): ?>
    <li>
      <a data-toggle="tab" href="#tab-typicons" data-pack="typcn">Typicons</a>
    </li>
    <?php endif; ?>
    <?php if ($use_font_linux): ?>
    <li>
      <a data-toggle="tab" href="#tab-font-linux" data-pack="fl">Font-Linux</a>
    </li>
    <?php endif; ?>
    <?php if ($use_rpg_awesome): ?>
    <li>
	 <!-- bug fix for wrong tag of RPG-Awesome
     <a data-toggle="tab" href="#tab-rpg-awesome" data-pack="fa">RPG-Awesome</a> -->
	 <a data-toggle="tab" href="#tab-rpg-awesome" data-pack="ra">RPG-Awesome</a>
    </li>
    <?php endif; ?>

<!-- add guideling page -->
	<li>
	 <a data-toggle="tab" href="#tab-guide" data-pack="">Guide</a>
    </li>
<!-- add guideling page -->
  </ul>

  <main class="tab-content">

<!-- add guideling page -->
    <div id="tab-guide" class="tab-pane fade">
<p>
<table>
    <thead>
        <tr>
            <th>Flag</th>
            <th>Flag (FA)</th>
            <th>Values</th>
            <th>Description </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>size</td>
            <td>-</td>
            <td>(see&nbsp;defaultSize&nbsp;option)</td>
            <td>Size of icon (in pixel) </td>
        </tr>
        <tr>
            <td>pack</td>
            <td>-</td>
            <td>(see&nbsp;defaultPack&nbsp;option)</td>
            <td>Icon pack (fa, glyphicon, fugue, oxygen)</td>
            <td>
            </td>
        </tr>
        <tr>
            <td>circle</td>
            <td>-</td>
            <td>-</td>
            <td>Create a&nbsp;circle&nbsp;around the icon </td>
        </tr>
        <tr>
            <td>border</td>
            <td>-</td>
            <td>-</td>
            <td>Add a&nbsp;border&nbsp;around the icon </td>
        </tr>
        <tr>
            <td>borderColor</td>
            <td>-</td>
            <td>-</td>
            <td>Set the color border </td>
        </tr>
        <tr>
            <td>padding</td>
            <td>-</td>
            <td>-</td>
            <td>Apply a&nbsp;padding&nbsp;to the icon (in pixel) </td>
        </tr>
        <tr>
            <td>background</td>
            <td>-</td>
            <td>-</td>
            <td>Apply a&nbsp;background&nbsp;to the icon (in hex or color name) </td>
        </tr>
        <tr>
            <td>color</td>
            <td>-</td>
            <td>-</td>
            <td>Apply a&nbsp;color&nbsp;to the icon (in hex or color name) </td>
        </tr>
        <tr>
            <td>class</td>
            <td>-</td>
            <td>-</td>
            <td>Adds additional&nbsp;CSS&nbsp;classes to the icon (useful for Font Awesome or Glyphicon) </td>
        </tr>
        <tr>
            <td>align</td>
            <td>-</td>
            <td>left|center|right</td>
            <td>Align icon (left,&nbsp;right&nbsp;or&nbsp;center)</td>
            <td>
            </td>
        </tr>
        <tr>
            <td>left</td>
            <td>-</td>
            <td>-</td>
            <td>Align icon to&nbsp;left </td>
        </tr>
        <tr>
            <td>right</td>
            <td>-</td>
            <td>-</td>
            <td>Align icon to&nbsp;right </td>
        </tr>
        <tr>
            <td>center</td>
            <td>-</td>
            <td>-</td>
            <td>Align icon to&nbsp;center </td>
        </tr>
        <tr>
            <td>-</td>
            <td>lg</td>
            <td>-</td>
            <td>Increase of 33% the size of icon </td>
        </tr>
        <tr>
            <td>-</td>
            <td>2x|3x|4x|5x</td>
            <td>-</td>
            <td>Increase the size of icon </td>
        </tr>
        <tr>
            <td>-</td>
            <td>border</td>
            <td>-</td>
            <td>Add border to icon </td>
        </tr>
        <tr>
            <td>-</td>
            <td>spin</td>
            <td>-</td>
            <td>Add spin animation </td>
        </tr>
        <tr>
            <td>-</td>
            <td>pulse</td>
            <td>-</td>
            <td>Add pulse animation </td>
        </tr>
        <tr>
            <td>-</td>
            <td>rotate</td>
            <td>90|180|270</td>
            <td>Rotate the icon </td>
        </tr>
        <tr>
            <td>-</td>
            <td>flip</td>
            <td>horizontal|vertical</td>
            <td>Flip the icon </td>
        </tr>
        <tr>
            <td>-</td>
            <td>pull-left</td>
            <td>-</td>
            <td>Pull the icon to left </td>
        </tr>
        <tr>
            <td>-</td>
            <td>pull-right</td>
            <td>-</td>
            <td>Pull the icon to right </td>
        </tr>
        <tr></tr>
    </tbody>
</table>


    </div>
<!-- add guideling page -->



    <div id="tab-font-awesome" class="tab-pane fade">

      <div class="row tab-icons">
        <?php foreach($list_font_awesome as $icon): ?>
          <div class="col-sm-4">
            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
			<!-- modify FA6 new coding
              <i class="fa fa-fw fa-2x fa-<?php echo $icon ?>"></i>
			  -->
			  <i class="fa-solid fa-fw fa-2x fa-<?php echo $icon ?>"></i>
            </button>
            <small><?php echo $icon ?></small>
          </div>
        <?php endforeach ?>
      </div>

    </div>
<!-- add FA6 brand icons -->
	<div id="tab-font-awesome-br" class="tab-pane fade">

      <div class="row tab-icons">
        <?php foreach($list_font_awesome_br as $icon): ?>
          <div class="col-sm-4">
            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
              <i class="fa-brands fa-fw fa-2x fa-<?php echo $icon ?>"></i>
            </button>
            <small><?php echo $icon ?></small>
          </div>
        <?php endforeach ?>
      </div>
    </div>
<!-- add FA6 brand icons -->

    <div id="tab-rpg-awesome" class="tab-pane fade">

      <div class="row tab-icons">
        <?php foreach($list_rpg_awesome as $icon): ?>
          <div class="col-sm-4">
            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
              <i class="ra ra-fw ra-2x ra-<?php echo $icon ?>"></i>
            </button>
            <small><?php echo $icon ?></small>
          </div>
        <?php endforeach ?>
      </div>

    </div>

    <div id="tab-mdi" class="tab-pane fade">

      <div class="row tab-icons">
        <?php foreach($list_material_design_icons as $icon): ?>
          <div class="col-sm-4">
            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
              <i class="icon mdi mdi-<?php echo $icon ?>"></i>
            </button>
            <small><?php echo $icon ?></small>
          </div>
        <?php endforeach ?>
      </div>

    </div>

    <div id="tab-glyphicon" class="tab-pane fade">

      <div class="row tab-icons">
        <?php foreach($list_glyphicon as $icon): ?>
          <div class="col-sm-4">
            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
              <i class="icon glyphicon glyphicon-<?php echo $icon ?>"></i>
            </button>
            <small><?php echo $icon ?></small>
          </div>
        <?php endforeach ?>
      </div>

    </div>

    <div id="tab-typicons" class="tab-pane fade">

      <div class="row tab-icons">
        <?php foreach($list_typicons as $icon): ?>
          <div class="col-sm-4">
            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
              <i class="fa-fw fa-2x typcn typcn-<?php echo $icon ?>"></i>
            </button>
            <small><?php echo $icon ?></small>
          </div>
        <?php endforeach ?>
      </div>

    </div>

    <div id="tab-font-linux" class="tab-pane fade">

      <div class="row tab-icons">
        <?php foreach($list_font_linux as $icon): ?>
          <div class="col-sm-4">
            <button class="btn btn-default btn-xs btn-icon" title="<?php echo $icon ?>" data-icon-name="<?php echo $icon ?>">
              <i class="icon fl fl-<?php echo $icon ?>"></i>
            </button>
            <small><?php echo $icon ?></small>
          </div>
        <?php endforeach ?>
      </div>

    </div>

    <div class="preview-box hide">

      <hr/>

      <div class="row">

        <div class="box-alignment col-sm-6">
          <label>Alignment</label>
          <div class="btn-group btn-group-xs">
            <button class="button btn btn-default active" data-icon-align="" title="Use no align">
              <img src="../../../images/media_align_noalign.png" />
            </button><button class="button btn btn-default" data-icon-align="left" title="Align the icon on the left">
              <img src="../../../images/media_align_left.png" />
            </button><button class="button btn btn-default" data-icon-align="center" title="Align the icon in the center">
              <img src="../../../images/media_align_center.png" />
            </button><button class="button btn btn-default" data-icon-align="right" title="Align the icon on the right">
              <img src="../../../images/media_align_right.png" />
            </button>
          </div>
        </div>

        <div class="box-size col-sm-6">
          <label>Image size</label>
          <div class="btn-group btn-group-xs">
            <button class="button btn btn-default" data-icon-size="small" title="Small size">
              <img src="../../../images/media_size_small.png" />
            </button><button class="button btn btn-default" data-icon-size="medium" title="Medium size">
              <img src="../../../images/media_size_medium.png" />
            </button><button class="button btn btn-default" data-icon-size="large" title="Large size">
              <img src="../../../images/media_size_large.png" />
            </button><button class="button btn btn-default active" data-icon-size="original" title="Original size">
              <img src="../../../images/media_size_original.png" />
            </button>
          </div>
        </div>

      </div>

      <p>&nbsp;</p>

      <label>Preview</label>
      <pre id="preview"></pre>

      <input type="hidden" id="output" />
      <input type="hidden" id="icon_pack" />
      <input type="hidden" id="icon_name" />
      <input type="hidden" id="icon_size" />
      <input type="hidden" id="icon_align" />

    </div>

  </main>

  <footer>
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="container-fluid">
        <div class="navbar-text">
          <button type="button" id="btn-preview" class="hidden btn btn-default">Preview code</button>
          <button type="button" id="btn-insert" class="btn btn-success">Insert</button>
          <button type="button" id="btn-reset" class="btn btn-default">Reset</button>
        </div>
      </div>
    </nav>
  </footer>

</body>
</html>

</code>
</details>
  * Скачайте мод {{ :wiki:plugin:icons_kaos.zip |архив icons_kaos.zip}} и разорхивируйте
  * Установите плагин icons.zip через менеджер плагинов
=====Обновление=====
Для обновления удалите исходную папку lib/plugins/icons и установите новую версию, как указано выше.
=====Файл для загрузки=====
  * {{ :wiki:plugin:giterlizzi-dokuwiki-plugin-icons-9809e06.zip |Плагин иконок icons}}
FortAwesome/Шрифт-Awesome Выпуск 6.7.2
  * {{ :wiki:plugin:fontawesome-free-6.7.2-desktop.zip |Fontawesome-free-6.7.2-desktop.zip}}
  * {{ :wiki:plugin:fontawesome-free-6.7.2-web.zip |Fontawesome-free-6.7.2-web.zip}}
  * {{ :wiki:plugin:font-awesome-6.7.2.zip |Исходный код (zip)}}
  * {{ :wiki:plugin:font-awesome-6.7.2.tar.gz |Исходный код (tar.gz)}}
  * https://github.com/FortAwesome/Font-Awesome/releases/tag/6.7.2
=====Лицензия=====
  * **Author:** [[giuseppe.diterlizzi@gmail.com|Giuseppe Di Terlizzi]]
  * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]]