شرح عمل خط الأيقونات لبلوجر Font Awesome

شرح عمل خط الأيقونات لبلوجر Font Awesome

السلام عليكم ور حمة الله و بركاتو
تدوينة اليوم تتحدث عن خطوط الايقونات
واستعمالاتها على الويب بشكل عام و مدونات بلوجر بشكل خاص
طبعا سنستعمل في الشرح الخط الشهير Font Awesome و هو الأكثر تنوعاً و الأسهل استخداماً
أولا قبل كل شيء عليك بإضافة كود CSS الخاص بهذا الخط
. ابحث بإستعمال Ctrl+F عن </head> و أضف الكود التالي فوقه

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 

الأن يتبقى لنا التطبيق
كل كود لديه اسم خاص للأيقونة مثلاً

fa-leaf

 <i class="fa fa-leaf"></i>  fa-leaf

fa fa-leaf

بالنسبة لــِ fa فهي اساسية في كل الأكواد توضع قبل المعرف الخاص بكل أيقونة
fa-leaf هو معرف الأيقونة

سؤال قد يطرأ على ذهنك كيف يمكنني تكبير حجم الأيقونات
الحل بسيط و سهل جداً كل ما عليك هو إضافة أحد القيم التالية بعد معرف الأيقونة مفصول بمسافة 
fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x

مثال

fa-leaf fa-lg

fa-leaf fa-1x

fa-leaf fa-2x

fa-leaf fa-3x

fa-leaf fa-4x

fa-leaf fa-5x

 <i class="fa fa-leaf fa-lg"></i> fa-leaf fa-lg
<i class="fa fa-leaf fa-1x"></i> fa-leaf fa-1x
<i class="fa fa-leaf fa-2x"></i> fa-leaf fa-2x
<i class="fa fa-leaf fa-3x"></i> fa-leaf fa-3x
<i class="fa fa-leaf fa-4x"></i> fa-leaf fa-4x
<i class="fa fa-leaf fa-5x"></i> fa-leaf fa-5x 

إضافة خاصية الدوران الى الأيقونات الدائرية فقط
وذالك بإضافة القيمة fa-spin الى الكود
مثال

 <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> 

خاصية التحكم بلإتجاهات بستخدام القيمة fa-rotate

مثال

 عادي
 إتجاه-90 درجة
أفقي 180 درجة
عمودي على اليمين 270 درجة
أفقي عادي
 عمودي عادي

 <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> 

سؤال آخر قد يخطر على بالك كيف أضيف هذه الأيقونات الى القائمة العلوية مثلاً
مثل هذا القالب الذي استعمله
كل ماعليك هو إضافة كود الأيقونة بجانب التسمية
مثال
قبل

مثال

 <li><a href='/'> مثال </a></li> 

بعد

مثال

 <li><a href='/'> <i class="fa fa-anchor"></i>  مثال </a></li> 

قمنا بإضافة كود الأيقونة  <i class="fa fa-anchor"></i>  بعد الكلمة
هذا المثال تستطيع تطبيقه في أي مكان في القالب تقريباً

تستطيع ان تختار الأيقونة التي تريدها من مجموعة ظخمة
عبر زيارة الموقع الرسمي من هنا

إذا كان لديك أي مشكلة أو استفسار لا تتردد ضع ذالك في تعليق

قائمة الأيقونات مع القيمة لــ Font Awesome 4.0.3 CSS

•  fa-glass"\f000"
•  fa-music                              "\f001"
•  fa-search"\f002"
•  fa-envelope-o"\f003"
•  fa-heart"\f004"
•  fa-star"\f005"
•  fa-star-o"\f006"
•  fa-user"\f007"
•  fa-film"\f008"
•  fa-th-large"\f009"
•  fa-th"\f00a"
•  fa-th-list"\f00b"
•  fa-check"\f00c"
•  fa-times"\f00d"
•  fa-search-plus"\f00e"
•  fa-search-minus"\f010"
•  fa-power-off"\f011"
•  fa-signal"\f012"
•  fa-cog"\f013"
•  fa-trash-o"\f014"
•  fa-home"\f015"
•  fa-file-o"\f016"
•  fa-clock-o"\f017"
•  fa-road"\f018"
•  fa-download"\f019"
•  fa-arrow-circle-o-down"\f01a"
•  fa-arrow-circle-o-up"\f01b"
•  fa-inbox"\f01c"
•  fa-play-circle-o"\f01d"
•  fa-repeat"\f01e"
•  fa-refresh"\f021"
•  fa-list-alt"\f022"
•  fa-lock"\f023"
•  fa-flag"\f024"
•  fa-headphones"\f025"
•  fa-volume-off"\f026"
•  fa-volume-down"\f027"
•  fa-volume-up"\f028"
•  fa-qrcode"\f029"
•  fa-barcode"\f02a"
•  fa-tag"\f02b"
•  fa-tags"\f02c"
•  fa-book"\f02d"
•  fa-bookmark"\f02e"
•  fa-print"\f02f"
•  fa-camera"\f030"
•  fa-font"\f031"
•  fa-bold"\f032"
•  fa-italic"\f033"
•  fa-text-height"\f034"
•  fa-text-width"\f035"
•  fa-align-left"\f036"
•  fa-align-center"\f037"
•  fa-align-right"\f038"
•  fa-align-justify"\f039"
•  fa-list"\f03a"
•  fa-outdent"\f03b"
•  fa-indent"\f03c"
•  fa-video-camera"\f03d"
•  fa-picture-o"\f03e"
•  fa-pencil"\f040"
•  fa-map-marker"\f041"
•  fa-adjust"\f042"
•  fa-tint"\f043"
•  fa-pencil-square-o"\f044"
•  fa-share-square-o"\f045"
•  fa-check-square-o"\f046"
•  fa-arrows"\f047"
•  fa-step-backward"\f048"
•  fa-fast-backward"\f049"
•  fa-backward"\f04a"
•  fa-play"\f04b"
•  fa-pause"\f04c"
•  fa-stop"\f04d"
•  fa-forward"\f04e"
•  fa-fast-forward"\f050"
•  fa-step-forward"\f051"
•  fa-eject"\f052"
•  fa-chevron-left"\f053"
•  fa-chevron-right"\f054"
•  fa-plus-circle"\f055"
•  fa-minus-circle"\f056"
•  fa-times-circle"\f057"
•  fa-check-circle"\f058"
•  fa-question-circle"\f059"
•  fa-info-circle"\f05a"
•  fa-crosshairs"\f05b"
•  fa-times-circle-o"\f05c"
•  fa-check-circle-o"\f05d"
•  fa-ban"\f05e"
•  fa-arrow-left"\f060"
•  fa-arrow-right"\f061"
•  fa-arrow-up"\f062"
•  fa-arrow-down"\f063"
•  fa-share"\f064"
•  fa-expand"\f065"
•  fa-compress"\f066"
•  fa-plus"\f067"
•  fa-minus"\f068"
•  fa-asterisk"\f069"
•  fa-exclamation-circle"\f06a"
•  fa-gift"\f06b"
•  fa-leaf"\f06c"
•  fa-fire"\f06d"
•  fa-eye"\f06e"
•  fa-eye-slash"\f070"
•  fa-exclamation-triangle"\f071"
•  fa-plane"\f072"
•  fa-calendar"\f073"
•  fa-random"\f074"
•  fa-comment"\f075"
•  fa-magnet"\f076"
•  fa-chevron-up"\f077"
•  fa-chevron-down"\f078"
•  fa-retweet"\f079"
•  fa-shopping-cart"\f07a"
•  fa-folder"\f07b"
•  fa-folder-open"\f07c"
•  fa-arrows-v"\f07d"
•  fa-arrows-h"\f07e"
•  fa-bar-chart-o"\f080"
•  fa-twitter-square"\f081"
•  fa-facebook-square"\f082"
•  fa-camera-retro"\f083"
•  fa-key"\f084"
•  fa-cogs"\f085"
•  fa-comments"\f086"
•  fa-thumbs-o-up"\f087"
•  fa-thumbs-o-down"\f088"
•  fa-star-half"\f089"
•  fa-heart-o"\f08a"
•  fa-sign-out"\f08b"
•  fa-linkedin-square"\f08c"
•  fa-thumb-tack"\f08d"
•  fa-external-link"\f08e"
•  fa-sign-in"\f090"
•  fa-trophy"\f091"
•  fa-github-square"\f092"
•  fa-upload"\f093"
•  fa-lemon-o"\f094"
•  fa-phone"\f095"
•  fa-square-o"\f096"
•  fa-bookmark-o"\f097"
•  fa-phone-square"\f098"
•  fa-twitter"\f099"
•  fa-facebook"\f09a"
•  fa-github"\f09b"
•  fa-unlock"\f09c"
•  fa-credit-card"\f09d"
•  fa-rss"\f09e"
•  fa-hdd-o"\f0a0"
•  fa-bullhorn"\f0a1"
•  fa-bell"\f0f3"
•  fa-certificate"\f0a3"
•  fa-hand-o-right"\f0a4"
•  fa-hand-o-left"\f0a5"
•  fa-hand-o-up"\f0a6"
•  fa-hand-o-down"\f0a7"
•  fa-arrow-circle-left"\f0a8"
•  fa-arrow-circle-right"\f0a9"
•  fa-arrow-circle-up"\f0aa"
•  fa-arrow-circle-down"\f0ab"
•  fa-globe"\f0ac"
•  fa-wrench"\f0ad"
•  fa-tasks"\f0ae"
•  fa-filter"\f0b0"
•  fa-briefcase"\f0b1"
•  fa-arrows-alt"\f0b2"
•  fa-users"\f0c0"
•  fa-link"\f0c1"
•  fa-cloud"\f0c2"
•  fa-flask"\f0c3"
•  fa-scissors"\f0c4"
•  fa-files-o"\f0c5"
•  fa-paperclip"\f0c6"
•  fa-floppy-o"\f0c7"
•  fa-square"\f0c8"
•  fa-bars"\f0c9"
•  fa-list-ul"\f0ca"
•  fa-list-ol"\f0cb"
•  fa-strikethrough"\f0cc"
•  fa-underline"\f0cd"
•  fa-table"\f0ce"
•  fa-magic"\f0d0"
•  fa-truck"\f0d1"
•  fa-pinterest"\f0d2"
•  fa-pinterest-square"\f0d3"
•  fa-google-plus-square"\f0d4"
•  fa-google-plus"\f0d5"
•  fa-money"\f0d6"
•  fa-caret-down"\f0d7"
•  fa-caret-up"\f0d8"
•  fa-caret-left"\f0d9"
•  fa-caret-right"\f0da"
•  fa-columns"\f0db"
•  fa-sort"\f0dc"
•  fa-sort-asc"\f0dd"
•  fa-sort-desc"\f0de"
•  fa-envelope"\f0e0"
•  fa-linkedin"\f0e1"
•  fa-undo"\f0e2"
•  fa-gavel"\f0e3"
•  fa-tachometer"\f0e4"
•  fa-comment-o"\f0e5"
•  fa-comments-o"\f0e6"
•  fa-bolt"\f0e7"
•  fa-sitemap"\f0e8"
•  fa-umbrella"\f0e9"
•  fa-clipboard"\f0ea"
•  fa-lightbulb-o"\f0eb"
•  fa-exchange"\f0ec"
•  fa-cloud-download"\f0ed"
•  fa-cloud-upload"\f0ee"
•  fa-user-md"\f0f0"
•  fa-stethoscope"\f0f1"
•  fa-suitcase"\f0f2"
•  fa-bell-o"\f0a2"
•  fa-coffee"\f0f4"
•  fa-cutlery"\f0f5"
•  fa-file-text-o"\f0f6"
•  fa-building-o"\f0f7"
•  fa-hospital-o"\f0f8"
•  fa-ambulance"\f0f9"
•  fa-medkit"\f0fa"
•  fa-fighter-jet"\f0fb"
•  fa-beer"\f0fc"
•  fa-h-square"\f0fd"
•  fa-plus-square"\f0fe"
•  fa-angle-double-left"\f100"
•  fa-angle-double-right"\f101"
•  fa-angle-double-up"\f102"
•  fa-angle-double-down"\f103"
•  fa-angle-left"\f104"
•  fa-angle-right"\f105"
•  fa-angle-up"\f106"
•  fa-angle-down"\f107"
•  fa-desktop"\f108"
•  fa-laptop"\f109"
•  fa-tablet"\f10a"
•  fa-mobile"\f10b"
•  fa-circle-o"\f10c"
•  fa-quote-left"\f10d"
•  fa-quote-right"\f10e"
•  fa-spinner"\f110"
•  fa-circle"\f111"
•  fa-reply"\f112"
•  fa-github-alt"\f113"
•  fa-folder-o"\f114"
•  fa-folder-open-o"\f115"
•  fa-smile-o"\f118"
•  fa-frown-o"\f119"
•  fa-meh-o"\f11a"
•  fa-gamepad"\f11b"
•  fa-keyboard-o"\f11c"
•  fa-flag-o"\f11d"
•  fa-flag-checkered"\f11e"
•  fa-terminal"\f120"
•  fa-code"\f121"
•  fa-reply-all"\f122"
•  fa-mail-reply-all"\f122"
•  fa-star-half-o"\f123"
•  fa-location-arrow"\f124"
•  fa-crop"\f125"
•  fa-code-fork"\f126"
•  fa-chain-broken"\f127"
•  fa-question"\f128"
•  fa-info"\f129"
•  fa-exclamation"\f12a"
•  fa-superscript"\f12b"
•  fa-subscript"\f12c"
•  fa-eraser"\f12d"
•  fa-puzzle-piece"\f12e"
•  fa-microphone"\f130"
•  fa-microphone-slash"\f131"
•  fa-shield"\f132"
•  fa-calendar-o"\f133"
•  fa-fire-extinguisher"\f134"
•  fa-rocket"\f135"
•  fa-maxcdn"\f136"
•  fa-chevron-circle-left"\f137"
•  fa-chevron-circle-right"\f138"
•  fa-chevron-circle-up"\f139"
•  fa-chevron-circle-down"\f13a"
•  fa-html5"\f13b"
•  fa-css3"\f13c"
•  fa-anchor"\f13d"
•  fa-unlock-alt"\f13e"
•  fa-bullseye"\f140"
•  fa-ellipsis-h"\f141"
•  fa-ellipsis-v"\f142"
•  fa-rss-square"\f143"
•  fa-play-circle"\f144"
•  fa-ticket"\f145"
•  fa-minus-square"\f146"
•  fa-minus-square-o"\f147"
•  fa-level-up"\f148"
•  fa-level-down"\f149"
•  fa-check-square"\f14a"
•  fa-pencil-square"\f14b"
•  fa-external-link-square"\f14c"
•  fa-share-square"\f14d"
•  fa-compass"\f14e"
•  fa-caret-square-o-down"\f150"
•  fa-caret-square-o-up"\f151"
•  fa-caret-square-o-right"\f152"
•  fa-eur"\f153"
•  fa-gbp"\f154"
•  fa-usd"\f155"
•  fa-inr"\f156"
•  fa-jpy"\f157"
•  fa-rub"\f158"
•  fa-krw"\f159"
•  fa-btc"\f15a"
•  fa-file"\f15b"
•  fa-file-text"\f15c"
•  fa-sort-alpha-asc"\f15d"
•  fa-sort-alpha-desc"\f15e"
•  fa-sort-amount-asc"\f160"
•  fa-sort-amount-desc"\f161"
•  fa-sort-numeric-asc"\f162"
•  fa-sort-numeric-desc"\f163"
•  fa-thumbs-up"\f164"
•  fa-thumbs-down"\f165"
•  fa-youtube-square"\f166"
•  fa-youtube"\f167"
•  fa-xing"\f168"
•  fa-xing-square"\f169"
•  fa-youtube-play"\f16a"
•  fa-dropbox"\f16b"
•  fa-stack-overflow"\f16c"
•  fa-instagram"\f16d"
•  fa-flickr"\f16e"
•  fa-adn"\f170"
•  fa-bitbucket"\f171"
•  fa-bitbucket-square"\f172"
•  fa-tumblr"\f173"
•  fa-tumblr-square"\f174"
•  fa-long-arrow-down"\f175"
•  fa-long-arrow-up"\f176"
•  fa-long-arrow-left"\f177"
•  fa-long-arrow-right"\f178"
•  fa-apple"\f179"
•  fa-windows"\f17a"
•  fa-android"\f17b"
•  fa-linux"\f17c"
•  fa-dribbble"\f17d"
•  fa-skype"\f17e"
•  fa-foursquare"\f180"
•  fa-trello"\f181"
•  fa-female"\f182"
•  fa-male"\f183"
•  fa-gittip"\f184"
•  fa-sun-o"\f185"
•  fa-moon-o"\f186"
•  fa-archive"\f187"
•  fa-bug"\f188"
•  fa-vk"\f189"
•  fa-weibo"\f18a"
•  fa-renren"\f18b"
•  fa-pagelines"\f18c"
•  fa-stack-exchange"\f18d"
•  fa-arrow-circle-o-right"\f18e"
•  fa-arrow-circle-o-left"\f190"
•  fa-caret-square-o-left"\f191"
•  fa-dot-circle-o"\f192"
•  fa-wheelchair"\f193"
•  fa-vimeo-square"\f194"
•  fa-try"\f195"
•  fa-plus-square-o"\f196"