Поддержка иконок

Около 4 минИнтерфейсИконкаИнтерфейс

Вся тема добавляет поддержку иконок формата FontClass в нескольких местах.

Вы можете использовать iconfont и fontawesome для добавления иконок в свой проект.

  • Для пользователей Китая рекомендуется iconfont
  • Для зарубежных пользователей рекомендуется fontawesome

Также поддерживает иконку формата png/svg. Вы можете использовать абсолютный путь или имя пути для добавления иконок.

Настройка иконок

Вы можете использовать иконку в нескольких местах.

  • Страница: установить icon в frontmatter

    Эта иконка будет использоваться в навигационной цепочке, заголовке страницы, сгенерированном элементе панели навигации, сгенерированном элементе боковой панели, навигации страницы и т. д.

  • Navbar: установите опцию icon в NavbarItemConfig

  • Sidebar: установите опцию icon в SidebarItemConfig

  • HomePage: установите опцию icon в элементе функции

Global Settings

You can set icon assets url and icon prefix globally via iconAssets and iconPrefix.

Setting Icon Assets

You should set icon related assets to iconAssets, where you can set one url or an array of urls of icon resources in format of css and js.

For example, you may use iconfont.cnopen in new window and fontawesomeopen in new window to generate your own assets.

To keep it simple, we add built-in keywords "iconfont", "fontawesome" and "fontawesome-with-brand support for you to get started easily.

Совет

To get better performance, you should try to replace above keywords to your own assets link to avoid loading unnecessary icons.

Creating your own assets links means that the assets link can only contains icons you used in the project.

Предупреждение

If you use this plugin for commercial project documentation, iconfont is not recommended as iconfont itself is a study/share platform for designers and developers.

Every icon is uploaded by users and you must get authorized from the author for commercial usage. Also there could be chance where the uploader obeys usage term. and upload icons where its copyright is at 3rd party.

Setting Icon Prefix

iconPrefix is the icon prefix where you want to set,

Normally, there should be a common prefix for your icon class, for iconfont icon classes are iconfont icon-<ICON-NAME> and for fontawesome free icon classes are fas fa-<icon-name>. So when you are setting the above assets option with keywords or a single link generated from iconfont website, fontawesome kit or fontawesome CDN, the plugin recognize those and set prefix as "iconfont icon-" and "fas fa-" automatically for you.

In other cases where you use your own url or you are setting multiple urls, you can manually set this options yourself. After all writing icon: code is always better then something like icon: iconfont icon-code or icon: fa-solid fa-code.

Generate your own iconfont assets

Iconfontopen in new window — это платформа для управления векторными иконками и коммуникации, созданная Alimama MUX.

Дизайнер загружает иконку на платформу Iconfont, а пользователь может настроить загрузку иконок в различных форматах. Пользователи также могут преобразовать иконку в шрифт.

Как использовать

Во-первых, вам нужно создать новый проект для установки и управления иконками вашего сайта:

  1. Войдите в Iconfont с помощью GitHub или Weibo.
  2. Найдите "Resources → My Projects" в верхней части веб-сайта и щелкните иконку "New Project" в правом верхнем углу.
  3. Установите узнаваемое название проекта
  4. Заполните FontClass/Symbol prefix с icon- (вы также можете заполнить в соответствии с вашими предпочтениями, но вам нужно установить это значение iconPrefix в настройках темы с дополнительным префиксом iconfont)
  5. Семейство шрифтов, пожалуйста, сохраните iconfont
Новый проект
Новый проект

Импорт иконки

  1. Свободно ищите через iconfont, чтобы найти иконку, которую вы хотите использовать, и нажмите кнопку "Add to Library" на иконке

    Добавить в библиотеку
    Добавить в библиотеку
  2. После поиска всех значков щелкните иконку "Add to Library" в правом верхнем углу, нажмите "Add to Project" ниже и выберите созданный проект, затем подтвердите.

Редактирование иконки

На странице проекта вы можете редактировать иконки в проекте, включая настройки положения, размера, поворота, цвета, номера Unicode и класса/символа шрифта.

Редактирование иконки
Редактирование иконки

Создание файлов иконок

  1. Нажмите кнопку "Font Class" над проектом и нажмите "Generate".

    Создание иконки
    Создание иконки
  2. Установите ссылку css на iconAssets в настройках темы.

Tips

Совет

Если вы добавите новую иконку в будущем, повторно создайте новый адрес CSS и установите для него значение iconAssets в параметрах темы.

Conflicts with private character

Font Icon associate each icon with a character in unicode private character scope, the character used by iconfont is randomly.

Iconfont will try to solve conflicts by assigning a new character if a new icon's default character is already used in current project, however different projects may have conflicts.

So we do not recommend you to use multiple iconfont links as assets, if you ready want to do so, check the icons to ensure every former project icon is not covered by those in latter ones.

Using Fontawesome Kits

Эта тема имеет встроенную поддержку Fontawesome.

Импорт

By default, we use jsdelivr CDN to load V6 version of fontawesome free icons. This should be enough for most open source projects. All you need is to set iconAssets: "fontawesome" in theme options:

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    // Or "fontawesome-with-brands"
    iconAssets: "fontawesome",
  }),
});







 


Besides, you can purchase at fontawesome.comopen in new window to use kits or import brand icons.

Fontawesome kits with pro features support pro icons, more icon styles and uploading your own icons.

Вы можете установить для iconAssets значение "iconfont", чтобы использовать следующие избранные иконки IconFont:

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    iconAssets: "iconfont",
  }),
});