Leituras relacionadas:
Explicação detalhada do ícone da fonte do bootstrap glificons
Deixe -me dizer quais ícones da fonte são?
Os ícones de fontes são fontes de ícones usadas em projetos da Web. Embora os halflings dos glificons exijam uma licença comercial, você pode usar esses ícones gratuitamente com um bootstrap baseado em projetos.
Para expressar sua gratidão ao autor do ícone, espero que você adicione um link ao site da Glyphicons ao usá -lo.
Eu uso o Bootstrap há muito tempo, e o ícone de glifos embutidos é suficiente para atender às necessidades de pequenos projetos. Você só precisa usar um estilo para criar o ícone. Embora pareça incrível, nunca analisei como ele a implementou. Depois de localizar as ferramentas de desenvolvedor electro através do Chrome, aprendi que ele está usando a tecnologia de elemento pseudo-elemento CSS.
<span> </span>
.Glyphicons define o estilo de todas as fontes de ícones de glificons
.glyphicons {Posição: relativa; topo: 1px; display: Block Inline; Font-Family: 'Glyphicons Halflings'; estilo de fonte: Normal; Peso da fonte: 400; HEUTO DE LINHA: 1; -Webkit-Font-Smoothing:}O conteúdo exibido é definido por uma subclasse definida por outra classe, como: glificon-eur: antes
.GLOPHICON-EUR: Antes, .Glyphicon-Euro: antes de {conteúdo: "/20ac";}Observando o documento, descobri que, além de: Antes (implementação do CSS2: Adicione conteúdo antes do elemento), existem: Primeira letra (implementação CSS1, adicione estilos especiais à primeira letra do texto, válida quando a exibição é definida como Bloco),:: Primeira linha (CSS1 Implementação, Adicionar estilos especiais para a primeira linha do texto, válida quando a queda é definida para o que é definido para o que é definido para o que é definido (CSS1), a primeira linha) é que a primeira linha é definida para o que é definido: a primeira linha).
Depois de entender o princípio, o código será simples. O código específico é o seguinte:
<! doctype html> <head lang = "zh-cn"> <head> <meta charset = "gb2312"> <titter> demonstração de miaoqiyuan.cn </title> <style type = "text/css"> body {background: #cc; FONT-Family: 'MicroSoft Yahei ';}. Container {Background: #fff; largura: 800px; margem: 50px Auto; borda: sólido 1PX#0096D7; Radio de borda: 10px;}. 15px;}. Container H2 a {color: #fff;}. Contêiner Ul {estilo de lista: nenhum; preenchimento: 0; margem: 0;} ul.me {preenchimento: 5px;} ul.me li {margin: 5px 10px; fundo: #eee; altura: 40px; #Ddd; Radio de borda: 10px;}. Font-icon: Antes, .Font-icon: After {Font-Family: 'Impact'; Font-Size: 16px; cor:#0096D7; PADDING: 4px 6px; Border: #CDF; Border: Solid 1Px#009D7; Os pseudo-elementos não têm efeito no elemento estilo*/. font-icon {cor:#090; font-family: 'Airal';}. Web: antes {content: 'home';} minério {cor:#c00;} h2: primeira letra {font-size: 20px; cor:#c00;}. chat: depois de {content: 'chatme!'; background: #fdc; color:#d76900; border-cor:#d76900; margin-left: 5px; href = "http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-ow-achieve/"> bootstrap glificons FONT Método de Fonte </a> </h2> <div> <!-Método Glyphicons- http://www.miaoqiyuan.cn/</li><!-- Coloque o efeito dentro-> <li> <span> </span> mqycn2 </li> <!-Método GLYPHICONS-</span> <li> <mpan> 77068320 1301425789 </span> <pan> <li> Internais-> <li> <pan> </span> mqycn2 </li> <!-Método dos Glificons-> <li> <man> 77068320 1301425789 </span> </span> </span> <!-coloque o efeito nos internos-<li> <li> <lum> </span> mqycn2 <! method--><li><span>77068320 1301425789 </span> <span></span><!-- Put the effect in the internals--><li><span></span><!-- Put the front and back of the glyphicons method--><li><span>77068320 1301425789 </span> <span></span></li><!-- Put the Frente e traseira do método dos glificons-> <li> <pan> 77068320 1301425789 </span> </span> </span> </li> <!-Coloque o efeito nos internos-coloque o efeito interno e a sobreposição de estilo, assim como o estilo normal. A última configuração também substituirá a configuração anterior-> <li> <span> mqycn2 </span> </li> </ul> </div> </div> </body> </html>O método de implementação do ícone da fonte do Bootstrap Glyphicons que o editor apresentou a você acabou. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a todos a tempo!