Lecturas relacionadas:
Explicación detallada del icono de fuentes de Bootstrap Glyphicons
Déjame decirte qué son los íconos de fuentes.
Los iconos de fuentes son fuentes de iconos utilizadas en proyectos web. Aunque Glyphicons Halflings requiere una licencia comercial, puede usar estos iconos de forma gratuita con una Bootstrap basada en proyectos.
Para expresar su gratitud al autor del icono, espero que agregue un enlace al sitio web de Glyphicons al usarlo.
He estado usando Bootstrap durante mucho tiempo, y el icono de glifos incorporado es suficiente para satisfacer las necesidades de pequeños proyectos. Solo necesita usar un estilo para mencionar el icono. Aunque se siente increíble, nunca he analizado cómo lo implementó. Después de localizar las herramientas de desarrollador Electro a través de Chrome, aprendí que está utilizando la tecnología de pseudoelemento CSS.
<span> </span>
.glyphicons define el estilo de todas las fuentes de iconos de glificones
.glyphicons {posición: relativo; superior: 1px; pantalla: bloque en línea; font-family: 'glificons halflings'; font-style: normal; font-weight: 400; line-tight: 1; -webkit-font-smoothing:}El contenido mostrado se define por una subclase definida por otra clase, como: Glyphicon-eur: antes
.glyphicon-eur: antes, .glyphicon-euro: antes {contenido: "/20ac";}Mirando el documento, descubrí que además de: antes (implementación css2: agregar contenido antes del elemento), existen: Lettra (implementación de CSS1, agregue estilos especiales a la primera letra del texto, válido cuando la pantalla está configurada),: primera línea (implementación CSS1, agregue el contenido especial a la primera línea del texto, cuando la pantalla se establece en bloque) y: después (después (después (Afters2S elemento).
Una vez que comprenda el principio, el código será simple. El código específico es el siguiente:
<! Doctype html> <head lang = "zh-cn"> <head> <meta charset = "gb2312"> <title> demostración de miaoqiyuan.cn </title> <style type = "text/css"> cuerpo {fondo: #ccc; font-family: 'microsoft Yahei ';}. Container {fondo: #fff; ancho: 800px; margen: 50px Auto; Border: Solid 1px#0096d7; Border-Radius: 10px;}. Container H2 {Font-Size: 16px; Font-width: 200; color: #ffff; fondo:#0096d7; Margin: 0; 15px;}. Container H2 A {Color: #fff;}. Container ul {list-style: none; relled: 0; margen: 0;} ul.me {relleno: 5px;} ul.me li {margen: 5px 10px; fondo: #eee; altura: 40px; línea-height: 40px; text-indent: 5px; border; #DDD;border-radius:10px;}.font-icon:before,.font-icon:after{font-family:'Impact';font-size:16px;color:#0096D7;padding:4px 6px;background:#CDF;border:solid 1px #0096D7;border-radius:10px;margin-right:5px;}/* Los pseudo-elementos no tienen ningún efecto en el elemento estilo*/. font-icon {color:#090; font-familia: 'airal';}. web: antes {content: 'home';}. qq: antes {content: 'qq';}. wechat: antes {content: 'wechat'; color:#090; color de frontera:#090; fondo:#99f760;}. Chat. Ore {color:#c00;} h2: primera letra {font-size: 20px; color:#c00;}. chat: después de {content: 'chatMe!'; fondos: #fdc; color:#d76900; href = "http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/"> Bootstrap Glyphicons Font Method </a> </h2> <iv> <ul> <!-Método Gyphicons-> <li> <span> </span> http://www.miaoqiyuan.cn/</li><!-- Pon el efecto dentro de-> <li> <span> </span> mqycn2 </li> <!-Método Glyphicons-> <li> <li> 770683320 1301425789 </span> <span> </span> <! Internals-> <li> <span> </span> mqycn2 </li> <!-Glyphicons Method-> <li> <span> 77068320 1301425789 </span> <span> </span> <!-Ponga el efecto en los internales-> <li> </span> mqycn2 </li> < Método-> <li> <span> 77068320 1301425789 </span> <span> </span> <!-Pon el efecto en las partes internas-> <li> <span> </span> <!-Ponga la parte delantera y posterior del método Gyphicon Al frente y la parte posterior del método Glyphicons-> <li> <span> 77068320 1301425789 </span> <span> </span> </li> <!-Pon el efecto en el efecto interno y la superposición de estilo interno, al igual que el estilo normal. La última configuración también sobrescribirá la configuración anterior-> <li> <span> mqycn2 </span> </li> </ul> </div> </div> </body> </html>El método de implementación del icono de fuente Bootstrap Glyphons que el editor le presentó. Si tiene alguna pregunta, déjame un mensaje. ¡El editor responderá a todos a tiempo!