Ao escrever páginas de front-end, geralmente usamos algumas fotos, como ícones pequenos. Se você usar a imagem, o código será mais problemático. Recentemente, encontrei um método conveniente e prático, basta usá -lo diretamente.1. Introduzir métodos de operação de imagem
Primeiro, entramos no URL: https://www.iconfont.cn/
Se você não consegue se lembrar deste site, pode pesquisar no Baidu: os vetores do Alibaba, e este site aparecerá;
Aqui estão dois métodos mais usados e convenientes.
Método 1: Referência da classe da fonteEtapa 1: insira o site e podemos ver uma caixa de pesquisa, digite diretamente o nome do ícone desejado ou você pode encontrá -lo na biblioteca do ícone.
Etapa 2: depois adicione ao carrinho de compras.
Etapa 3: clique no carrinho de compras para criar um novo projeto e confirme que, se você deseja adicionar uma imagem ao mesmo projeto, não precisará recriá -lo novamente.
Etapa 4: Em seguida, a página a seguir será exibida, copie o código e faça referência ao documento do código.
<link rel = Stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js>
Etapa 5: Ao apresentar o código, lembre -se de adicionar http:
Step 6: Select the corresponding icon and get the class name to copy and paste, use no-referrer src=/img/bVbB5hz/view src=https://cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg title=image.jpg>
<Body> <i classe/= iconfont icon-xxx> </i> </body>Método 2: Referência de símbolo
Etapa 1: se um projeto quiser usar vários ícones, você também poderá selecionar os ícones que deseja usá -los e adicioná -los ao carrinho de compras, clique em Atualizar código e atualizar a conexão de referência de código. Este método precisa ser baixado localmente.
Etapa 2: Após o download, você pode ver alguns arquivos na pasta e introduzir arquivos JS na página Código.
<link rel = Stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </sCript>
Etapa 3: coloque o pacote de arquivos no mesmo diretório, para que a referência ao ícone possa entrar em vigor.
Etapa 4: para o mesmo método, precisamos nos referir ao nome da imagem abaixo do ícone, copiar e colar o nome da imagem no SVG e substituir href = altere o nome.
<svg class = icon arria-hidden = true> <use xlink: href =#icon-079aiqing> </se use> </svg>
Etapa 5: Além de introduzir os dois endereços de arquivo acima na página de código, também precisamos introduzir um código de estilo.
<estilo> .iCon {largura: 1em; Altura: 1em; Alinhamento vertical: -0.15em; preenchimento: currentColor; estouro: oculto; } </style>A seguir estão todos os códigos de referência
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = width, escala inicial = 1.0> <meta http-equiv = x-ua-compatible href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script> </head> <estilo> .icon {width: 1em; Altura: 1em; Alinhamento vertical: -0.15em; preenchimento: currentColor; estouro: oculto; } </style> <body> <type de entrada = período de texto de texto = pesquisa> <svg class = icon arria-hidden = true> <use xlink: href =#icon-079aiqing> </se use> </svg> </body> </html>Efeito de código:
Resumir:O primeiro método pode ser usado diretamente, introduzindo -o, que é rápido e conveniente, e não requer download, o que é mais conveniente de usar. As desvantagens só podem ser usadas sozinhas e não suportam cores.
O segundo método suporta imagens multicoloridas e múltiplas, e o efeito da introdução de várias imagens será melhor. As desvantagens precisam ser baixadas no pacote de arquivos locais e devem ser colocadas no mesmo diretório antes do uso.
No geral, os gráficos vetoriais do Alibaba são muito úteis para os desenvolvedores de front-end e são livres para usar. Você pode usar os métodos acima de acordo com suas necessidades.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.