القراءات ذات الصلة:
شرح مفصل لأيقونة خط الخطي الغليفيكون
دعني أخبرك ما هي أيقونات الخط؟
أيقونات الخطوط هي خطوط أيقونة المستخدمة في مشاريع الويب. على الرغم من أن Glyphicons Halflings تتطلب ترخيصًا تجاريًا ، يمكنك استخدام هذه الرموز مجانًا باستخدام bootstrap المستند إلى المشاريع.
للتعبير عن امتنانك لمؤلف الأيقونة ، آمل أن تضيف رابطًا إلى موقع Glyphicons عند استخدامه.
لقد كنت أستخدم bootstrap لفترة طويلة ، وأيقونة أنفيكات مدمجة كافية لتلبية احتياجات المشاريع الصغيرة. تحتاج فقط إلى استخدام نمط واحد لإحضار الرمز. على الرغم من أنه شعور مدهش ، إلا أنني لم أحلل أبدًا كيفية تنفيذه. بعد تحديد موقع Electro المقابلة من خلال أدوات مطور Chrome ، علمت أنه يستخدم تقنية العناصر الزائفة CSS.
<span> </span>
يحدد. جليفيكون نمط جميع خطوط أيقونة الغليفيكون
.glyphicons {الموضع: النسبية ؛ الأعلى: 1px ؛ العرض: inline block ؛ font-family: 'glyphicons halflings' ؛يتم تعريف المحتوى المعروض بواسطة فئة فرعية محددة بواسطة فئة أخرى ، مثل: glyphicon-eur: قبل
.plyphicon-eur: قبل ،.
عند النظر إلى المستند ، وجدت أنه بالإضافة إلى: قبل (تنفيذ CSS2: إضافة محتوى قبل العنصر) ، هناك: الحرفي الأول (تطبيق CSS1 ، أضف أنماطًا خاصة إلى الحرف الأول من النص ، وصيحة عند ضبط العرض على العرض) ،:: الإضافة (CSS1 "، أضف أنماطًا خاصة إلى السطر الأول من النص.
بمجرد فهم المبدأ ، سيكون الرمز بسيطًا. الرمز المحدد كما يلي:
<! doctype html> <head lang = "zh-cn"> <head> <meta charset = "gb2312"> <title> demo of miaoqiyuan.cn </title> <style type = "text/css" Yahei '؛}. Container {Background: #fff ؛ العرض: 800px ؛ الهامش: 50px Auto ؛ الحدود: Solid 1px#0096d7 ؛ Border-Radius: 10px ؛}. Container H2 {font-size: 16px ؛ 15px ؛}. حاوية H2 a {color: #fff ؛}. حاوية ul {style: none ؛ padding: 0 ؛ margin: 0 ؛ #ddd ؛ الحدود-radius: 10px ؛} العناصر الزائفة ليس لها تأثير على العنصر style*/. font-icon {color:#090 ؛ font-family: 'Airal' ؛}. web: قبل {content: 'home' ؛ QQ: قبل {content: 'qq' ؛} ore {color:#c00 ؛} h2: first-letter {font-size: 20px ؛ color:#c00 ؛}. الدردشة: بعد {content: 'chatme!' ؛ الخلفية: #fdc ؛ اللون:#d76900 ؛ href = "http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-to-achieve/"> bootstrap bootstrap </li> طريقة تنفيذ الخط </a> </h2> http://www.miaoqiyuan.cn/</li>< 0< !- ضع التأثير في الداخل-> <li> <list> </span> mqycn2 </li> <!-طريقة glyphicons-> <li> <span> 77068320 1301425789 </span> الداخلية-> <li> <span> </span> mqycn2 </li> <!-طريقة الغليفيكونون-> <li> <span> 77068320 1301425789 </span> <span> </span> <!-ضع التأثير في الداخلية- الطريقة-> <li> <li> <span> 77068320 1301425789 </span> <span> </span> <!-ضع التأثير في الداخلية-> <li> <span> </span> <!-وضع الجبهة والخلفية </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li. الأمامي والخلف من طريقة الغليفيكون-> <li> <span> 77068320 1301425789 </span> <span> </span> </li> <!-ضع التأثير في الداخلية-ضع التأثير الداخلي وتراكب الأسلوب ، تمامًا مثل النمط الطبيعي. سيقوم الإعداد الأخير أيضًا بكتابة الإعداد السابق-> <li> <span> mqycn2 </span> </li> </ul> </viv> </viv> </body> </html>لقد انتهى طريقة تنفيذ أيقونة FONSTRAP Glyphicons التي قدمها المحرر إليك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر على الجميع في الوقت المناسب!