الخط رائع 6: مراجعة كاملة
- 1 كيفية تثبيت الخط رائع
- طريقة 1.
- الطريقة 2.
- 2 كيفية استخدام الرموز الرائعة للخط
- 1 الرموز القياسية
- 2 أيقونات كبيرة
- 3 أيقونات العرض الثابتة
- 4 أيقونات للقائمة المصقولة
- 5 أيقونات ونقلت مؤطرة
- 6 أيقونات الرسوم المتحركة
- 7 أيقونات تحولت
- 8 الرموز الجمع
- 3 Font Awesome 4.5.0 collection, classes وcss code to insert using the content property
- 4 الموارد ذات الصلة
- حجم الرمز
- رمز لون
- الأسئلة المتداولة
Font Awesome هي مجموعة من أيقونات المتجهات القابلة للتطوير. يمكن تنسيق الرموز باستخدام خصائص CSS ، وتعيين لونها وحجمها وظلها وأكثر من ذلك بكثير. يتضمن الإصدار 5.5.0 الخط 605 أيقونات.
1 كيفية تثبيت الخط رائع
طريقة 1.
استخدم إصدار Font-Awesome.css من الملف عن طريق إضافة الكود التالي إلى<head> الجزء:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">بمجرد توصيل الخط ، يمكنك استخدام الرموز على موقعك.
الطريقة 2.
قم بتنزيل الخط من ٪٪ font Awesome ٪٪. قم بفك الأرشيف وتحميل مجلدين من الأرشيف إلى خادم الموقع - CSS والخطوط. إذا كان لديك بالفعل مجلدات بها مثل هذه الأسماء على موقعك ، فأنت بحاجة فقط إلى إضافة ملفات من المجلدات التي تم تنزيلها إليهم.
يمكنك استخدام النسخة الكاملة أو المصغرة من الملف:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 كيفية استخدام الرموز الرائعة للخط
يمكن إضافة الرموز إلى صفحة ويب بطريقتين: من خلال تعيين الفئات المناسبة لـ<i> و<span> elements, أوby adding them to the desired element using the :before, :after pseudo-elements وthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> LI: قبل {المحتوى: "\ f015" ؛/ * إضافة أيقونة الصفحة الرئيسية */font-family: fontawesome ؛ color: #AAAAA ؛ Margin-Right: 10px ؛}1 الرموز القياسية
تم تصميم Font Awesome لاستخدامها مع العناصر المضمنة. من أجل إضافة أيقونات ، تحتاج أولاً إلى تعيين فئة FA على<i> أو<span> عنصر.
لإضافة الرمز المحدد قبل أو بعد العنصر ، فارغة<i></i> أو<span></span> تتم إضافة العنصر إلى العنصر ، الذي تم تعيينه فئة رمز ، بالإضافة إلى فئة إضافية تمتد على التصميم.
<i class="fa fa-camera-retro"></i>2 أيقونات كبيرة
لزيادة حجم أيقونة بالنسبة إلى حاويةه ، استخدم فئات FA-LG (33 ٪) ، FA-2X ، FA-3X ، FA-4X ، FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 أيقونات العرض الثابتة
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation أوlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> مسكن</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> مكتبة</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> التطبيقات</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> إعدادات</a ></li></ul>4 أيقونات للقائمة المصقولة
استخدم فئات FA-UL و FA-LI لاستبدال الرصاص الافتراضي في أ<ul>...</ul> قائمة برصاصة.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>قائمة الاغراض</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>قائمة الاغراض</li> <li><i class="fa-li fa fa-square"></i>قائمة الاغراض</li></ul>5 أيقونات ونقلت مؤطرة
Use the fa-border class to set the border for the icon. The pull-right وpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>lorem ipsum dolor sit amet ، exectetur adipiscing leit. Donec NEC Purus Congue ، Posuere Libero In ، Porta Sapien. في محاضرة SED ELIT. SED LACUS ELIT ، Semper VIDAE FELIS ID ، SODALES CONCUE SAPIEN.</p>6 أيقونات الرسوم المتحركة
أضف فئات FA-Spin و FA-PULSE و FA-REFRESH و FA-COG لإعداد أيقونات الغزل. الرسوم المتحركة غير مدعومة في IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 أيقونات تحولت
لتدوير أو قلب الرموز ، استخدم فئات FA-ROTATE-* و FA-FLIP-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 الرموز الجمع
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, وfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes وcss code to insert using the content property
أيقونات لتطبيقات الويب fa -adjust - \ f042 ؛fa -anchor - \ f13d ؛
fa -archive - \ f187 ؛
FA -ARROWS - \ F047 ؛
fa -asterisk - \ f069 ؛
faat - \ f1fa ؛
fa-balance-scale-\ f24e ؛
fa -ban - \ f05e ؛
fa -bank - \ f19c ؛
fa -barcode - \ f02a ؛
fa-battery-regty-\ f244 ؛
fa-battery-half-\ f242 ؛
FA-Battery-Quarter-\ F243 ؛
Fa-battery-three-Quarters-\ F241 ؛
fa-battery-full-\ f240 ؛
fa -bed - \ f236 ؛
fa -beer - \ f0fc ؛
fa -bell - \ f0f3 ؛
fa-bell-slash-\ f1f6 ؛
fa -binoculars - \ f1e5 ؛
FA-Birthday-Cake-\ f1fd ؛
fa -bolt - \ f0e7 ؛
fa -bomb - \ f1e2 ؛
FA -BOOK - \ F02D ؛
لتدوير أو قلب الرموز ، استخدم فئات FA-ROTATE-* و FA-FLIP-*.
4 الموارد ذات الصلة
بالإضافة إلى مجموعة Font Awesome ، يمكنك استخدام خطوط أيقونة أخرى أيضًا.
فونتيلو.يحتوي ٪٪ fontello ٪٪ على مجموعة كبيرة من خطوط الأيقونات المختلفة. يمكنك تحديد الرموز التي تحبها وتنزيلها على جهاز الكمبيوتر الخاص بك.
أيقونة الأساس.٪٪ أيقونة الأساس ٪٪ هي مجموعة أخرى للأيقونة من مطوري إطار المؤسسة. بالإضافة إلى الرموز القياسية ، يضم الموقع أيقونات مستديرة وأيقونات الوسائط الاجتماعية والمزيد.
أيقونات المواد.أيقونات المواد هي الرموز المسطحة الموحدة من Google والتي تجسد سهولة الإدراك. تم تحسين الرموز للعرض الجميل على جميع المنصات الشائعة ولجميع قرارات الشاشة.
تحتوي مجموعة Font Icon على 750+ أيقونات. أسهل طريقة لتثبيت مجموعة على موقع الويب الخاص بك هي استخدام أيقونات مثل Google Web Fonts. للقيام بذلك ، يتم تضمين الرمز التالي في علامة الصفحة:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">لعرض الخط في المتصفحات بشكل صحيح ، يتم إعطاء العنصر الذي سيستخدم خط الرمز فئة المواد:
.material-أيقونات {font-family: 'أيقونات' ؛ الخط الفاصل: الطراز الطبيعي: الطبيعية: الحجم الطبيعي: 24 بكسل ؛ / * حجم الرمز المفضل */ العرض: كتلة مضمنة ؛ العرض: 1EM ؛ الارتفاع: 1EM ؛ ارتفاع الخط: 1 ؛ تحويل النص: لا شيء ؛ تباعد الحروف: Word-Word-Wrap: Normal ؛ الفضاء الأبيض: Nowrap ؛ الاتجاه: LTR ؛ -بكيت-فونت-سذاجة: مضادة. / * مدعوم من جميع متصفحات WebKit */ تقديم النص: التحسين ؛ / * Safari و Chrome Support */ -Moz-Osx-Font-Smoothing: Grayscale ؛ /* دعم Firefox. */ font-feature-settings: 'liga' ؛ /* أي دعم. */}تتم إضافة الرموز نفسها باستخدام<I class=''material-أيقونات''>الرباط أو رمز HTML للرمز</i> العلامة ، على سبيل المثال:
<i class="material-أيقونات">account_balance_wallet</i><i class="material-أيقونات"></i>يتم فهم الرباط من قبل جميع المتصفحات الحديثة ، أي - بدءًا من الإصدار 10. يتم إنشاء رمز الرمز تلقائيًا ، لذلك تحتاج إلى النقر بزر الماوس الأيسر على صورة الرمز ونسخ المظهر المقترح.
حجم الرمز
حجم الرمز is controlled by additional classes:
.material-أيقونات.md-18 {font-size: 18px ؛} /* for<i class="material-أيقونات md-18"></i> */.material-أيقونات.md-24 {font-size: 24px ؛} /* for<i class="material-أيقونات md-24"></i> */.material-أيقونات.md-36 {font-size: 36px ؛} /* for<i class="material-أيقونات md-36"></i> */.material-أيقونات.md-48 {font-size: 48px ؛} /* for<i class="material-أيقونات md-48"></i> */رمز لون
يتم تعيين لون الرموز أيضًا باستخدام فئات إضافية:
.material-أيقونات.md-dark {color: rgba (0 ، 0 ، 0 ، 0.54) ؛} /*<i class="material-أيقونات md-dark"></i> */.material-أيقونات.md-light {color: rgba (255 ، 255 ، 255 ، 1) ؛} /*<i class="material-أيقونات md-light"></i> */.material-أيقونات.md-dark.md-in-inctive {color: rgba (0 ، 0 ، 0 ، 0.26) ؛} /*<i class="material-أيقونات md-dark md-inactive"></i> * /.material-أيقونات.md-light.md-in-inctive {color: rgba (255 ، 255 ، 255 ، 0.3) ؛} /*<i class="material-أيقونات md-light md-inactive">وجه</i> */لتعيين لون مخصص ، تحتاج إلى إضافة فئة تحدد لون الرمز ، على سبيل المثال:
.material-أيقونات.indigo {color: #1A237E ؛} /*<i class="material-أيقونات indigo"></i> */الأسئلة المتداولة
- ما هو الخط رائع من حيث البسيط؟
- في جوهره ، إنه خط يحتوي على أيقونات يمكن إضافتها إلى أي عنصر صفحة ويب لتعزيز وضوحه وتصميمه. تتكون المجموعة من عدة مئات من الرموز المناسبة لأي مهمة وهدف.مزيد من المعلومات حول هذا الرابط
ميشيل بينسون هو عشاق السفر ومبدع المحتوى. دمج الشغف بالتعليم والاستكشاف ، وقال انه ملموس لتبادل المعرفة وإلهام الآخرين من خلال جذب المحتوى التعليمي. جعل العالم أقرب إلى تمكين الأفراد ذوي الخبرة العالمية والشعور بالتجول.
