Lectures connexes:
Explication détaillée de l'icône de la police des glyphicons bootstrap
Laissez-moi vous dire quelles sont les icônes de police?
Les icônes de police sont des polices d'icônes utilisées dans les projets Web. Bien que les Halflings Glyphicons nécessitent une licence commerciale, vous pouvez utiliser ces icônes gratuitement avec un bootstrap basé sur un projet.
Pour exprimer votre gratitude à l'auteur de l'icône, j'espère que vous ajouterez un lien au site Web des Glyphicons lors de l'utilisation.
J'utilise Bootstrap depuis longtemps, et l'icône des glyphiques intégrées est suffisante pour répondre aux besoins des petits projets. Il vous suffit d'utiliser un seul style pour faire apparaître l'icône. Bien que cela semble incroyable, je n'ai jamais analysé comment il l'a implémenté. Après avoir localisé l'électro correspondant via des outils de développeur Chrome, j'ai appris qu'il utilise la technologie PSS pseudo-élémentaire.
<span> </span>
.Glyphicons définit le style de toutes les polices d'icônes de glyphicons
.Glyphicons {position: relatif; en haut: 1px; affichage: bloc en ligne; font-famille: 'Glyphicons halflings'; style font: normal; Font-weight: 400; line-height: 1; -webkit-fer-smoothing:}Le contenu affiché est défini par une sous-classe définie par une autre classe, comme: Glyphicon-Eur: avant
.glyphicon-eur: avant, .glyphicon-euro: avant {contenu: "/ 20ac";}En regardant le document, j'ai constaté qu'en plus de: avant (implémentation CSS2: ajouter du contenu avant l'élément), il y a: première lettre (implémentation CSS1, ajoutez des styles spéciaux à la première lettre du texte, valide lorsque l'affichage est défini sur bloquer),: première ligne (CSS1 Implémentation, Ajouter des styles spéciaux à la première ligne du texte, valide lorsque l'affichage est réglé pour bloquer) et: After (Crs2 met élément).
Une fois que vous comprenez le principe, le code sera simple. Le code spécifique est le suivant:
<! doctype html> <head lang = "zh-cn"> <éadf> <meta charset = "gb2312"> <itle> démo de miaoqiyuan.cn </ title> <style type = "text / css"> body {background: #ccc; font-family: 'Microsoft / CSS "> Yahei ';}. Container {Background: #fff; largeur: 800px; marge: 50px Auto; Border: Solid 1px # 0096D7; Border-Radius: 10px;}. Container H2 {Font-Size: 16px; Font-width: 200; Color: #fff; arrière-plan: # 0096D7; marge: 0; 15px;}. Conteneur h2 a {couleur: #fff;}. Conteneur ul {list-style: Aucun; padding: 0; marge: 0;} ul.me {padding: 5px;} ul.me li {margin: 5px 10px; fond: #eee; hauteur: 40px; line-height: 40px; text-intention: 5px; #DDD; Border-Radius: 10px;}. Font-Icon: avant, .font-icon: After {Font-Family: 'Impact'; Font-Size: 16px; Color: # 0096D7; Padding: 4px 6px; arrière-plan: #CDF; frontière: solide 1px # 0096D7; Border-Radius: 10px; Les pseudo-éléments n'ont aucun effet sur l'élément Style * /. Font-Icon {Color: # 090; font-Family: 'Airal';}. Web: avant {Content: 'Home';}. Qq: Before {Content: 'qq';}. WeChat: Before {Content: 'wechat'; Color: # 090; Border-Color: # 090; Background: # 99f760;}. Ore {couleur: # C00;} H2: Première lettre {Font-Size: 20px; Color: # C00;}. CHAT: After {Content: 'ChatMe!'; Background: #fdc; Color: # D76900; Border-Color: # D76900; margin-left: 5px;} </yple> </read> <a href = "http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/"> Bootstrap Glyphicons Font Method </a> </h2> </pan> <ul> <! http://www.miaoqiyuan.cn/</li><!-- Mettez l'effet à l'intérieur -> <li> <span> </span> mqycn2 </li> <! - Méthode Glyphicons -> <li> <span> 77068320 1301425789 </span> <pan> </pan> <! internes -> <li> <span> </span> mqycn2 </li> <! - Méthode des Glyphicons -> <li> <span> 77068320 1301425789 </span> <span> </span> <! - Mettez l'effet dans les internes -> <li> <pan> </span> mqycn2 </li> <! Méthode -> <li> <span> 77068320 1301425789 </span> <span> </span> <! - Mettez l'effet dans les internes -> <li> <span> </span> <! - Mettez l'avant et en arrière de la méthode Glyphicons -> <li> <pan> 77068320 1301425789 </panne> Avant et à l'arrière de la méthode des Glyphicons -> <li> <pan> 77068320 1301425789 </span> <span> </span> </li> <! - Mettez l'effet dans les internes - Mettez l'effet interne et la superposition de style, tout comme le style normal. Ce dernier paramètre écrasera également le paramètre précédent -> <li> <pan> mqycn2 </span> </li> </ul> </div> </div> </ body> </html>La méthode d'implémentation de l'icône de la police des glyphicons bootstrap que vous a introduite par l'éditeur est terminée. Si vous avez des questions, laissez-moi un message. L'éditeur répondra à tout le monde à temps!