El tema de la mariposa utiliza la fuente de iconos de Alibaba
⛄yooo~ Hoy les enseñare a embellecer el icono de fuente de Mariposa
⛄El tema de la mariposa es compatible con font-awesome v6, pero ¿qué debo hacer si aún no es suficiente?
⛄ Puede usar la fuente de iconos de Alibaba para expandir
- Versión mariposa: 4.5.1
seleccionar icono
-
iconfont icon library dirección: iconfont-Alibaba vector icon library
-
Después de encontrar el ícono que necesita, haga clic en Agregar a la biblioteca
- Añadir icono al proyecto
- generar código y copiar código
Configuración de mariposa
Crear un nuevo archivo css
- Cree una nueva fuente.css en la carpeta /source/css debajo de la carpeta del tema Butterfly, pegue el código copiado en ella
/* font.css */
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.woff2?t=1671175363970') format('woff2'),
url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.woff?t=1671175363970') format('woff'),
url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.ttf?t=1671175363970') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px; /* 字体大小自行修改 */
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-github:before {
content: "\ea0b";
color: red; /* 图标颜色需要自行修改 */
}
/*
此处省略项目中其他字体代码
*/
importar archivo css
- Modifique la configuración en _config.yml en la carpeta del tema Butterfly
# 省略其他代码
inject:
head:
- <link rel="stylesheet" href="/css/font.css"> # 引入刚刚新建的css文件
bottom:
# - <script src="xxxx"></script>
# ...
usar iconfont
- Modifique la configuración en _config.yml en la carpeta del tema Butterfly
- Usa el formato iconfont <icon name>
- El nombre del icono se puede ver en el proyecto iconfont
# 可配置导航栏
menu:
首页: / || iconfont icon-home
# ...
# ...
# 可配置社交图标
social:
iconfont icon-csdn: https://blog.csdn.net/xxx || CSDN
iconfont icon-juejin: https://juejin.cn/user/xxx || 掘金
fab fa-github: https://github.com/xxx || Github
⛄Lo anterior es todo el contenido de configuración
⛄ Si te es útil, por favor dame un pulgar hacia arriba