README.cn.md · OSCHINA-MIRROR/theajack-easy-icon

🚀 Высококачественный, простой в использовании веб-шрифт с иконками

Онлайн использование | Github | Gitee | English

[TOC]

0. Быстрый старт

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 иконок

1. Введение

Easy-ICON представляет собой простой в использовании шрифт с иконками.

Easy-ICON использует Font-Awesome и другие шрифты с иконками, выражая благодарность авторам!

Особенности:

Простота использования;
1583 часто используемых шрифта с иконками из различных шрифтов с иконками;
Возможность настройки пользовательских стилей CSS и масштабирования без потери качества;
Использование по модулям.

2. Установка и использование

2.1 Использование файла CSS (рекомендуется загрузить на локальный компьютер и затем ссылаться на него):

Easy-ICON разделен на пять модулей, которые можно использовать отдельно.

2.1.1 Онлайн-режим

Онлайн-режим зависит от сетевых шрифтов с иконками, а автономный режим преобразует шрифты с иконками в 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">

2.1.2 Автономный режим

<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" href="https://cdn.npmjs.com/package/easy-icon"><img src="https://img.shields.io/npm/v/easy-icon.svg" alt="Version">
<a href="https://npmcharts.com/compare/easy-icon?minimal=true"><img src="https://img.shields.io/npm/dm/easy-icon.svg" alt="Downloads">
<a href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/easy-icon.svg" alt="Size">
<a href="https://github.com/theajack/easy-icon/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/easy-icon.svg" alt="License">
<a href="https://github.com/theajack/easy-icon/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/easy-icon.svg" alt="TopLang">
<a href="https://github.com/theajack/easy-icon/issues"><img src="https://img.shields.io/github/issues-closed/theajack/easy-icon.svg" alt="issue">

<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" 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">

Или используйте объединённую версию:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theajack/easy-icon/dist/easy-icon-all.o.css">

2.2 Или используйте npm для установки:

npm i easy-icon;

Вам нужно только сослаться один раз: С использованием аналогично файлу CSS, модули можно использовать независимо, без необходимости использования всех.

2.2.1 Онлайн-режим:

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'; **Использование easy-icon**

1. **Импорт файлов CSS:**
* `easy-icon/css/easy-icon-f.css`;
* import `‘easy-icon/css/easy-icon-t.css’`;
* import `'easy-icon/css/easy-icon-l.css'`.

Либо используйте версию для коллекции:

```js
import 'easy-icon/easy-icon-all.js';

Импортируйте файлы CSS:

import ‘easy-icon/css/easy-icon-all.css’;


3. **Офлайн-режим:**

```js
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’;

Использование: Easy ICON очень прост в использовании. Вам нужно только вставить следующий тег туда, где вы хотите его использовать:

<i class="ei-spmile"></i>

Обратите внимание, что префиксы для пяти модулей различаются:

easy-icon-a: ei-;
easy-icon-a: ea-;
easy-icon-f: ef-;
easy-icon-t: et-;
easy-icon-l: el-.

Смотрите доступные значки.

Другие функции:

5.1. Вращение значков: Вы можете вращать значки, добавив класс ei-spin:

<i class="ei-spinner-snake ei-spin"></i>.

Класс ei-spin работает одинаково для всех пяти модулей.

5.2. Выбор размера: 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 для переопределения стиля по умолчанию.

5.3. Переворот: Используйте 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>.

5.4. Поворот: Используйте 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>.

OSCHINA-MIRROR/theajack-easy-icon

0. Быстрый старт

1. Введение

2. Установка и использование

2.1 Использование файла CSS (рекомендуется загрузить на локальный компьютер и затем ссылаться на него):

2.1.1 Онлайн-режим

2.1.2 Автономный режим

2.2 Или используйте npm для установки:

2.2.1 Онлайн-режим:

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/theajack-easy-icon .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

0. Быстрый старт

1. Введение

2. Установка и использование

2.1 Использование файла CSS (рекомендуется загрузить на локальный компьютер и затем ссылаться на него):

2.1.1 Онлайн-режим

2.1.2 Автономный режим

2.2 Или используйте npm для установки:

2.2.1 Онлайн-режим:

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/theajack-easy-icon