worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили: • backends • api • inks4pages • webextensions • tls
wiki:plugin:icons

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Следующая версия		Предыдущая версия
wiki:plugin:icons [2025/01/07 01:02] – создано vladpolskiywiki:plugin:icons [2025/01/19 12:18] (текущий) – [Ошибка вида Error: Call to undefined function trigger_event()] vladpolskiy
Строка 10: Строка 10:
  
 =====Совместимость===== =====Совместимость=====
-  * 2024-02-06 "Kaos" неизвестно+  * 2024-02-06 "Kaos" да
   * 2023-04-04 "Jack Jackrum" да   * 2023-04-04 "Jack Jackrum" да
   * 2022-07-31 "Igor" да   * 2022-07-31 "Igor" да
   * 2020-07-29 "Hogfather" да   * 2020-07-29 "Hogfather" да
 +:!: **Примечание:** При возникновении ошибки вида <fc #fa8072>**Error: Call to undefined function trigger_event()**</fc> в 2024-02-06 "Kaos" смотрите вариант исправления ниже в разделе [[wiki:plugin:icons#Часто задаваемые вопросы|Часто задаваемых вопросов]].
 =====Монтаж===== =====Монтаж=====
 Используйте менеджер плагинов для установки или… Используйте менеджер плагинов для установки или…
Строка 90: Строка 91:
  
 =====Конфигурация и настройки===== =====Конфигурация и настройки=====
-{{tablelayout?rowsHeaderSource=Auto}} +^ Вариант конфигурации ^ Значение по умолчанию ^ Описание ^ 
-^   ^   ^ +^ ''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/displaywikipage и установите новую версию, как указано выше.+Для обновления удалите исходную папку lib/plugins/icons и установите новую версию, как указано выше.
 =====Файл для загрузки===== =====Файл для загрузки=====
-{{ :wiki:plugin:edittable.zip |}}+  * {{ :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:** [[dokuwiki@cosmocode.de|Andreas Gohr]]+  * **Author:** [[giuseppe.diterlizzi@gmail.com|Giuseppe Di Terlizzi]]
   * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]]   * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]]
  
  
  
wiki/plugin/icons.1736200945.txt.gz · Последнее изменение: 2025/01/07 01:02 — vladpolskiy