The entire theme adds FontClass / Picture format icon support in multiple places.
You can use iconfont and fontawesome to add icons to your project.
- For china users, iconfont is recommended
- For overseas users, fontawesome is recommended
Also, png/svg format icon is supported. You can use absolute path or pathname to add icons.
You can use icon in multiple places.
This icon will be used in breadcrumb, page title, navbar generated item, sidebar generated item, page nav, etc.
iconoption in NavbarItemConfig
iconoption in SidebarItemConfig
iconoption in feature item
Iconfont is a vector icon management and communication platform created by Alimama MUX.
The designer uploads the icon to the Iconfont platform, and the user can customize the download of icons in a variety of formats. Users can also convert the icon into a font.
How to use
First, you need to create a new project to set and manage your website’s icons:
- Log in to Iconfont using GitHub or Weibo.
- Find "Resources → My Projects" at the top of the website, and click the "New Project" icon in the upper right corner.
- Set a recognizable project name
- Fill in
icon-(you can also fill in according to your preference, but you need to set this value to
iconPrefixin theme options with an extra
- Font Family please keep
Search freely through iconfont to find the icon you want to use, and click the "Add to Library" button on the icon
After searching for all the icons, click the "Add to Library" icon in the upper right corner, click "Add to Project" below and select the project you created then confirm.
On the project page, you can edit the icons in the project, including adjustments with position, size, rotate, color, Unicode number and Font Class / Symbol.
Generate Icon Files
Please click the "Font Class" button above the project and click Generate.
Set the css link to
iconAssetsin theme options.
If you add a new icon in the future, please regenerate the new CSS address and set it to
iconAssets in theme options.
This theme has built-in Fontawesome support.
You need to set
iconAssets: "fontawesome" in theme options.
Font-awesome current version is V6
Please follow fontawesome document.
IconFont Featured Icons
You can set
"iconfont" to use the following IconFont featured icons: