Verwandte Lesungen:
Detaillierte Erläuterung von Bootstrap -Glyphicons -Schriftzonen -Symbol
Lassen Sie mich Ihnen sagen, welche Schriftsymbole sind?
Schriftartsymbole sind Icon -Schriftarten, die in Webprojekten verwendet werden. Obwohl Glyphicons Halblinge eine kommerzielle Lizenz benötigen, können Sie diese Symbole kostenlos mit einer projektbasierten Bootstrap verwenden.
Um dem Symbolautor Ihre Dankbarkeit auszudrücken, hoffe ich, dass Sie bei der Verwendung einen Link zur Glyphicons -Website hinzufügen.
Ich benutze Bootstrap schon lange und das eingebaute Glyphik-Symbol reicht aus, um die Bedürfnisse kleiner Projekte zu erfüllen. Sie müssen nur einen Stil verwenden, um das Symbol aufzurufen. Obwohl es sich fantastisch anfühlt, habe ich nie analysiert, wie es es implementiert hat. Nachdem ich das entsprechende Elektro durch Chromentwickler-Tools gefunden hatte, erfuhr ich, dass er die CSS-Pseudo-Element-Technologie verwendet.
<span> </span>
Glyphicons definiert den Stil aller Glyphicons -Ikone -Schriftarten
. Glyphicons {Position: relativ; ober: 1px; Anzeige: Inline-Block; Schriftfamilie: 'Glyphicons Halblinge'; Schriftstil: Normal; Schriftgewicht: 400; Zeilenhöhe: 1;Der angezeigte Inhalt wird durch eine von einer andere Klasse definierte Unterklasse definiert, wie z.
. Glyphicon-Eur: Vorher, Glyphicon-Euro: Vor {Inhalt: "/20ac";}Mit Blick auf das Dokument stellte ich fest, dass zusätzlich zu: vor (CSS2 Implementierung: Inhalt vor dem Element hinzufügen): Erstgeschichte (CSS1-Implementierung, Fügen Sie dem ersten Buchstaben des Textens gültig, wenn das Display auf Block festgelegt ist).
Sobald Sie das Prinzip verstanden haben, ist der Code einfach. Der spezifische Code lautet wie folgt:
<!doctype html><head lang="zh-CN"><head><meta charset="GB2312"><title>DEMO of miaoqiyuan.cn</title><style type="text/css">body{background:#CCC;font-family:'Microsoft Yahei';}.container{background:#FFF;width:800px;margin:50px auto;border:solid 1px #0096D7;border-radius:10px;}.container h2{font-size:16px;font-width:200;color:#FFF;background:#0096D7;margin:0;padding:5px 15px;}. Container H2 A {Farbe: #fff;}. Container ul {Listenstil: Keine; Padding: 0; Margin: 0;} ul.me {padding: 5px;} ul.me li {margin: 5px 10px; Hintergrund:##40px; line-height: 40PX; #Ddd; Border-Radius: 10px;}. Font-Icon: vor,. Pseudoelemente haben keinen Einfluss auf das Element STYLE*/. FONT-ICON {Farbe:#090; Schriftfamilie: 'Airal';}. Web: Vor {Inhalt: 'home';}. qq: vor {content: 'qq';} ore {color:#c00;} H2: Erstgeschichte {Schriftgröße: 20px; Farbe:#C00;}. CHAT: After {Inhalt: 'Chatme!'; href = "http://www.miaoqiyuan.cn/p/bootstrap--Glyphicons-font-how-t-achieve/"> Bootstrap Glyphicons FONT-Implementierungsmethode </a> </h2> <ul> <! http://www.miaoqiyuan.cn/</li><!-- Put the effect inside--><li><span></span> mqycn2 </li><!-- Glyphicons method--><li><span>77068320 1301425789 </span> <span></span><!-- Put the effect in the internals--><li><span></span> mqycn2 </li><!-- Glyphicons method--><li><span>77068320 1301425789 </span> <span></span><!-- Put the effect in the internals--><li><span></span> mqycn2 </li><!-- Put the front and back of the glyphicons Methode-> <li> <Pan> 77068320 1301425789 </span> <span> </span> <!-Setzen Sie den Effekt in die Interna-> <li> <span> </span> <!-Setzen Sie die Vorder- und Rückseite der Glyphicons-Methode vor-die Glyphicons-Methode. Vorder- und Rückseite der Glyphicons-Methode-> <li> <Pan> 77068320 1301425789 </span> <span> </span> </li> <! Die letztere Einstellung überschreibt auch die vorherige Einstellung-> <li> <Pan> mqycn2 </span> </li> </ul> </div> </div> </body> </html>Die Bootstrap -Glyphicons -Schrift -Icon -Implementierungsmethode, die der Editor Ihnen vorgestellt hat, ist vorbei. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird alle rechtzeitig antworten!