Personaliza el ícono iconfont en el tema Fluid de Hexo

Introducción al tema Fluid de Hexo

  Hexo es un marco de blogs rápido, conciso y eficiente. Hexo usa Markdown (u otros lenguajes de marcado) para analizar artículos y, en cuestión de segundos, puede generar páginas web estáticas con hermosos temas.

  Fluid es un tema elegante en Hexo. Este es un tema de Hexo con estilo Material Design. Le ayuda a concentrarse en escribir con un diseño simple. Para su página de configuración, consulte https://hexo.fluid-dev.com/docs /guía/ .

  Los íconos sociales se pueden usar en la página de inicio (acerca de) del tema Fluid. Para su uso, consulte https://fluid-dev.github.io/hexo-fluid-docs/icon/ . Pero hay muy pocos integrados. en los íconos sociales en la página de inicio y, a veces, Requiere un ícono personalizado.

  Este artículo introducirá la personalización de los íconos iconfont en el tema Fluid de Hexo y corregirá los errores en las publicaciones de blog públicas existentes.

Cómo personalizar iconfont icon

  iconfont es una biblioteca de íconos vectoriales con potentes funciones y rico contenido de íconos en China. Proporciona descarga de íconos vectoriales, almacenamiento en línea, conversión de formato y otras funciones. Está construido por el equipo de experiencia de Alibaba. Es una herramienta conveniente para el diseño y el front- desarrollo final Herramienta, sitio web: https://www.iconfont.cn/ .

  Los pasos para personalizar el ícono iconfont en el tema Fluid de Hexo (tome el ícono de Toutiao como ejemplo) son los siguientes:

1. Busque el ícono de Toutiao en el sitio web de iconfont, agréguelo al carrito de compras y descargue el código al local;

2. Descomprima el archivo comprimido del código descargado y cámbiele el nombre a toutiao;

3. Coloque la carpeta toutiao debajo de la carpeta source/css en el proyecto Hexo;

4. La configuración en el archivo _config.fluid.yml es la siguiente:

skip_render:
  - 'css/**/*'
  
custom_css:
  - /css/toutiao/iconfont.css

about:
  avatar: /img/avatar.png
  name: "Fluid"
  intro: "个人博客"
  icons:
    - {
    
     class: 'icon iconfont icon-jinritoutiao', link: 'you own toutiao website', tip: '今日头条'}

5. Implemente Hexo, el resultado es el siguiente:
   

Corrección

  En el paso 4 de la configuración anterior, ahora hay pocos artículos de referencia y el método de clase en los íconos de configuración en el único artículo de referencia en chino es incorrecto.

  La forma correcta es abrir la página de muestra (demo_index.html) en la carpeta toutiao, hacer clic con el botón derecho en el icono de Clase de fuente y seleccionar Ver:

  La clase debe seleccionarse de la siguiente manera:

  Lo anterior es la corrección de la publicación de blog pública existente sobre cómo configurar la clase de íconos en el tema Fluid de Hexo.

  Bienvenido a visitar mi blog personal: https://percent4.github.io/ .