كيفية عرض خطوط الأيقونات على صفحات الويب؟ نمط عرض خط خط الرمز في HTML

إن استخدام خط الرمز لإنشاء أيقونات له فوائد التالية مقارنة بالرموز القائمة على الصور:

1. حجم التغيير الحر

2. تعديل اللون بحرية

3. أضف تأثير الظل

4.IE6 يمكن أن يدعمها أيضًا

5. دعم الخصائص الأخرى لأيقونات الصور ، مثل الشفافية والدوران ، إلخ.

6. يمكنك إضافة سمات مثل سكتات النص وعلاق الخلفية: نص طالما أن المتصفح يدعمه.

تعديل النص:

<h3>

<span aria-hidden = true data-icon = &#x21dd ؛> </span>

الإحصائيات

</h3>

[Data-Icon]: قبل {

Font-Family: icons ؛ / * خط BYO ICON ، تم تعيينه بذكاء */

المحتوى: attr (data-iCon) ؛

تحدث: لا شيء ؛ /* لا يمكن الوثوق بها ، ولكن مهلا. */

}

أيقونة فردية:

<a href =# class = icon-alone>

<span aria-hidden = true data-icon = &#x25a8 ؛> </span>

<span class = screen-reger-text> rss </span>

</a>

/ * نفس CSS على النحو الوارد أعلاه ، بالإضافة إلى */

.icon-alone {

العرض: كتلة مضمنة. / * Chrome 19 كان غريبًا مع قابلية النقر بدون هذا */

}

.SCREEN-REARER-TEXT { / * reusable ، نوع أدوات من الفئة * /

الموقف: مطلق ؛

أعلى: -99999px ؛

اليسار: -9999px ؛

}

إذا كنت بحاجة إلى إنشاء IconFont الخاص بك ، فمن المستحسن استخدام Iconmoon. باستخدامه ، يمكنك إنشاء خط الرمز الذي تحتاجه عن طريق تحميل SVG أو الخطوط. هذه المقالة عبارة عن مظاهرة عبر الإنترنت باستخدام Iconmoon لتوليدها.

يرجى زيارة العرض التوضيحي عبر الإنترنت لعرض النتائج. أتمنى أن تعجبك خط الأيقونة. إذا كنت تعتقد أن الرمز غير سلس بما فيه الكفاية ، فيمكنك التفكير في استخدام CUFON للمعالجة ، بحيث يكون الرمز الذي تم إنشاؤه أكثر جمالًا.

المصدر: http://www.gbin1.com/technology/css/20120827-icon-font-use/