1. Faça login no site oficial do ícone da fonte Alibaba
biblioteca de ícones vetoriais iconfont-Alibaba
2. Siga as etapas abaixo
1. Clique em Gerenciamento de Recursos - Meus Projetos - Novo Projeto na barra de navegação superior
2. Preencha o novo formulário de projeto
3. Clique no nome do projeto recém-criado à esquerda - Ícone de upload para o projeto - Selecione o arquivo SVG local para upload - Revisão pendente, clique no botão Remover cor e enviar
4. Após enviar, clique em “Sem código ainda, clique aqui para gerar” para gerar o endereço do código e copiá-lo
3. Introduzindo estilos no projeto
Método 1: Copie o código do estilo após abrir o link acima, crie um novo icon.css na pasta de estilos do projeto e cole o código do estilo que acabou de copiar e apresente-o (escolha 1 de 2 maneiras) (1) Apresente-o em
index.css ícone.css ( @importar )
@import "./icon.css";(2) Ou introduza icon.css ( import ) em main.js no projeto
import "@/styles/icon.css"Método 2: introduza-o diretamente no estilo da página que precisa usar o ícone da fonte
Nota: Você precisa adicionar http: na frente do endereço copiado :
<style lang="less" scoped>
@import "http://at.alicdn.com/t/c/font_4153392_o81rmnxariq.css";
</style>Método 3: Baixe o arquivo do ícone da fonte para local
Passo 1. Clique para baixar para local
Etapa 2: descompacte o arquivo do ícone da fonte baixado, altere o nome do arquivo para fonte e copie a pasta de fontes para a pasta de estilos no projeto
Etapa 3: introduzir main.js
import "@/styles/font/iconfont.css"
4. Use ícones de fontes na página
<div class="iconfont icon-shouye"></div>
<div class="iconfont icon-fenxiang"></div>5. Exibição de efeito
Conforme mostrado na figura, a configuração foi bem-sucedida.
Resumo : Em projetos gerais, é recomendado usar o método 3 para baixar o arquivo do ícone da fonte para o local