Слияние кода завершено, страница обновится автоматически
Онлайн-демонстрация | Github | Gitee | 中文
[TOC]
Easy-ICON — это ценная и простая в использовании библиотека иконок веб-шрифтов. Вам нужно только подключить файл CSS (или пакет npm), чтобы использовать более 1000 красивых иконок.
Вот простой пример использования файла CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css">
</head>
<body>
<i class="ei-heart ei-xs" style="color: red;"></i>
<i class="ei-spinner-indicator ei-spin"></i> <!-- Вращающийся индикатор загрузки -->
<i class="ea-star-half-empty"></i>
<i class="et-like ei-l"></i>
<i class="ef-html5 ei-xl"></i>
<i class="el-goods ei-4x"></i>
</body>
</html>
Изображение эффекта:
😃 Попробуйте 1583 иконки онлайн
Easy-ICON – это простая в использовании библиотека иконок веб-шрифта.
Easy-ICON использует несколько библиотек иконок, таких как Font-Awesome, чтобы поблагодарить авторов за их вклад!
Особенности:
Easy-icon разделена на пять модулей, на которые можно ссылаться независимо.
Онлайн-режим зависит от библиотеки шрифтов в сети, в то время как автономный режим преобразует библиотеку шрифтов в base64, чтобы её можно было использовать в автономном режиме.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.css">
Или используйте версию коллекции:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-a.o.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-f.o.css">
<link rel="stylesheet" **Использование easy-icon**
1. **Способ 1: использование CDN**
* Добавьте в HTML-файл следующие строки:
* `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-t.o.css">`
* `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-l.o.css">`.
2. **Способ 2: использование npm**
* Установите пакет с помощью команды `npm i easy-icon`.
* Импортируйте пакет один раз:
* аналогично файлу CSS, можно импортировать независимо от модуля, не используя все;
* онлайн-режим:
* `import 'easy-icon';`
* `import 'easy-icon/easy-icon-a.js';`
* `import 'easy-icon/easy-icon-f.js';`
* `import 'easy-icon/easy-icon-t.js';`
* `import 'easy-icon/easy-icon-l.js';`.
* Можно также напрямую импортировать файлы CSS (необходимо использовать с такими инструментами, как css-loader):
* `import 'easy-icon/css/easy-icon.css';`
* `import 'easy-icon/css/easy-icon-a.css';`
* `import 'easy-icon/css/easy-icon-f.css';`
* `import 'easy-icon/css/easy-icon-t.css';`
* `import 'easy-icon/css/easy-icon-l.css';`.
* Или используйте коллекционную версию:
* `import 'easy-icon/easy-icon-all.js';`
* `import 'easy-icon/css/easy-icon-all.css';`.
* Оффлайн-режим:
* `import 'easy-icon/offline';`
* `import 'easy-icon/offline/easy-icon-a.js';`
* `import 'easy-icon/offline/easy-icon-f.js';`
* `import 'easy-icon/offline/easy-icon-t.js';`
* `import 'easy-icon/offline/easy-icon-l.js';`.
* Также можно напрямую импортировать файлы CSS (необходимо использовать с такими инструментами, как css-loader):
* `import 'easy-icon/offline/css/easy-icon.css';`
* `import 'easy-icon/offline/css/easy-icon-a.css';`
* `import 'easy-icon/offline/css/easy-icon-f.css';`
* `import 'easy-icon/offline/css/easy-icon-t.css';`
* `import 'easy-icon/offline/css/easy-icon-l.css';`.
* Или используйте коллекционную версию:
* `import 'easy-icon/offline/easy-icon-all.js';`
* `import 'easy-icon/offline/css/easy-icon-all.css';`.
3. **Использование**
* Просто вставьте тег в любом месте:
* `<i class="ei-smile"></i>`.
* Следует отметить, что префиксы, соответствующие пяти модулям, различаются:
* easy-icon-a: ei-;
* easy-icon-a: ea-;
* easy-icon-f: ef-;
* easy-icon-t: et-;
* easy-icon-l: el-.
* [См. какие значки вы можете использовать](https://theajack.gitee.io/easy-icon/).
* **Другие функции**
* *Вращение значка*
* Добавьте класс ei-spin к значку, чтобы он вращался:
* `<i class="ei-spinner-snake ei-spin"></i>`,
* класс ei-spin работает одинаково для всех пяти модулей.
* *Выбор размера*
* Easy-icon поставляется в восьми размерах на выбор: от маленького до большого: xs, s, l, lg, 2x, 3x, 4x, 5x.
* Класс размера работает одинаково для всех пяти модулей:
* `<i class="ei-smile ei-s"></i>`
* `<i class="ei-smile ei-xs"></i>`.
* Конечно, вы можете использовать CSS для настройки любого стиля.
* *Переворот*
* Используйте `ei-flip-horizontal`, чтобы перевернуть значок на 180 градусов вокруг вертикальной оси:
* `<i class="ei-thumbs-o-up ei-flip-horizontal"></i>`.
* Используйте `ei-flip-vertical`, чтобы перевернуть значок на 180 градусов вокруг горизонтальной оси:
* `<i class="ei-thumbs-o-up ei-flip-vertical"></i>`.
* *Поворот*
* Используйте `ei-rotate-90`, `ei-rotate-180`, `ei-rotate-270`, чтобы повернуть значок по часовой стрелке на 90, 180, 270 градусов соответственно:
* `<i class="ei-smile ei-rotate-90"></i>`
* `<i class="ei-smile ei-rotate-180"></i>`
* `<i class="ei-smile ei-rotate-270"></i>`.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )