1. Inicie sesión en el sitio web oficial del icono de fuente de Alibaba
biblioteca de iconos vectoriales iconfont-Alibaba
2. Siga los pasos a continuación
1. Haga clic en Gestión de recursos - Mis proyectos - Nuevo proyecto en la barra de navegación superior
2. Rellena el formulario de nuevo proyecto.
3. Haga clic en el nombre del proyecto recién creado a la izquierda - Icono de carga al proyecto - Seleccione el archivo svg local para cargar - Pendiente de revisión, haga clic en el botón Eliminar color y enviar
4. Después de enviar, haga clic en "Aún no hay código, haga clic aquí para generar" para generar la dirección del código y copiarla.
3. Introducir estilos en el proyecto.
Método 1: copie el código de estilo después de abrir el enlace anterior, cree un nuevo icon.css en la carpeta de estilos del proyecto, pegue el código de estilo que acaba de copiar e introdúzcalo (elija 1 de 2 formas) (1) Preséntelo en
index.css icono.css ( @importar )
@import "./icon.css";(2) O introduzca icon.css ( importar ) en main.js en el proyecto
import "@/styles/icon.css"Método 2: introdúzcalo directamente en el estilo de la página que necesita usar el ícono de fuente
Nota: Debe agregar http: delante de la dirección copiada :
<style lang="less" scoped>
@import "http://at.alicdn.com/t/c/font_4153392_o81rmnxariq.css";
</style>Método 3: descargar el archivo del icono de fuente al local
Paso 1. Haga clic para descargar a local
Paso 2: descomprima el archivo del ícono de fuente descargado, cambie el nombre del archivo a fuente y copie la carpeta de fuentes a la carpeta de estilos debajo del proyecto.
Paso 3: Introducir en main.js
import "@/styles/font/iconfont.css"
4. Utilice iconos de fuentes en la página.
<div class="iconfont icon-shouye"></div>
<div class="iconfont icon-fenxiang"></div>5. Visualización de efectos
Como se muestra en la figura, la configuración fue exitosa
Resumen : en proyectos generales, se recomienda utilizar el método 3 para descargar el archivo del icono de fuente al local