مكتبة FontAwesome روابط وايقونات ورموز

أيقونات FontAwesome: إضافة رائعة لتزيين المواقع والمدونات

أيقونات FontAwesome هي أيقونات متجهة (Vector Icons) يمكن استخدامها لتزيين المواقع الإلكترونية، المدونات، تطبيقات الويب، التصميمات الرسومية، وغيرها. هذه الأيقونات تتميز بقابليتها للتحجيم إلى أي حجم دون فقدان الجودة، مما يجعلها مثالية للاستخدام في مختلف الأجهزة والشاشات.

فوائد استخدام أيقونات FontAwesome

قابلة للتخصيص: يمكن تخصيص هذه الأيقونات من حيث الحجم، اللون، الظل، والخلفية باستخدام أنماط CSS. كل ما عليك فعله هو إضافة الأنماط المطلوبة إلى ورقة الأنماط (CSS) لقالب مدونتك باستخدام الفئة i.
لا تحتاج إلى JavaScript: هذه الأيقونات لا تحتاج إلى أكواد JavaScript لتشغيلها، مما يقلل من وقت تحميل الموقع ويعمل على جميع الأجهزة بشكل مثالي.
مجانية للاستخدام: يمكن استخدام أيقونات FontAwesome مجانًا لأي غرض، سواء كان شخصيًا أو تجاريًا.
تحسين أداء الموقع: يتم تحميل هذه الأيقونات بسرعة تفوق سرعة تحميل ملفات الصور (مثل PNG) بعشر مرات، مما يقلل من عدد طلبات HTTP ويعزز سرعة تحميل الموقع. كما أنها تُحسّن تجربة المستخدم وتساعد في تحسين محركات البحث (SEO).

كيفية استخدام أيقونات FontAwesome في مدونة بلوجر

لإضافة أيقونات FontAwesome إلى مدونتك على بلوجر، اتبع الخطوات التالية:

الانتقال إلى قالب المدونة:
- ادخل إلى لوحة تحكم بلوجر.
- انتقل إلى القالب (من الأفضل أخذ نسخة احتياطية للقالب قبل التعديل).
- انقر على تحرير القالب.

إضافة كود FontAwesome:

اضغط على Ctrl + F للبحث عن علامة <head>.
بعد العثور على علامة <head>، قم بلصق الكود التالي تحتها:


<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) {
    "use strict";
    var i = window.document.createElement("link");
    var o = t || window.document.getElementsByTagName("script")[0];
    i.rel = "stylesheet";
    i.href = e;
    i.media = "only x";
    o.parentNode.insertBefore(i, o);
    setTimeout(function () { i.media = n || "all" });
}
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>

استخدام الأيقونات في المدونة:
بعد إضافة الكود السابق، يمكنك استخدام أيقونات FontAwesome في أي مكان في مدونتك باستخدام علامة  مع تحديد الفئة المناسبة. على سبيل المثال:
```
<li>
 <a href="https://www.example.com/">
 الرئيسية
 </a>
</li>
<li>
 <a href="/p/contact-us.html">
 اتصل بنا
 </a>
</li>
 
```

تخصيص الأيقونات باستخدام CSS

يمكنك تخصيص الأيقونات من حيث اللون، الحجم، الظل، وغيرها باستخدام CSS. إليك مثال لتخصيص جميع الأيقونات:


body {
  padding: 1em 1em 0;
}
body .fa {
  font-size: 3em;
  width: 2em;
  height: 1.5em;
  text-align: center;
}
.fa {
  color: #efefef;
}
.fa.fa-500px {
  color: #0099e5;
}
.fa.fa-adn {
  color: #4a484c;
}
.fa.fa-amazon {
  color: #ff9900;
}
.fa.fa-android {
  color: #a4c639;
}
.fa.fa-angellist {
  color: #000;
}
.fa.fa-apple {
  color: #979797;
}
.fa.fa-behance {
  color: #1769ff;
}
.fa.fa-behance-square {
  color: #1769ff;
}
.fa.fa-bitbucket {
  color: #205081;
}
.fa.fa-bitbucket-square {
  color: #205081;
}
.fa.fa-bitcoin {
  color: #ee9209;
}
.fa.fa-black-tie {
  color: #222;
}
.fa.fa-btc {
  color: #ee9209;
}
.fa.fa-buysellads {
  color: #c90100;
}
.fa.fa-cc-amex {
  color: #007bc1;
}
.fa.fa-cc-diners-club {
  color: #004a97;
}
.fa.fa-cc-discover {
  color: #f68121;
}
.fa.fa-cc-jcb {
  color: #003a8f;
}
.fa.fa-cc-mastercard {
  color: #0a3a82;
}
.fa.fa-cc-paypal {
  color: #253b80;
}
.fa.fa-cc-stripe {
  color: #00afe1;
}
.fa.fa-cc-visa {
  color: #0157a2;
}
.fa.fa-chrome {
  color: #4587f3;
}
.fa.fa-codepen {
  color: #000;
}
.fa.fa-connectdevelop {
  color: #391448;
}
.fa.fa-contao {
  color: #eb8623;
}
.fa.fa-creative-commons {
  color: #231f20;
}
.fa.fa-css3 {
  color: #1680c0;
}
.fa.fa-dashcube {
  color: #7f7f7f;
}
.fa.fa-delicious {
  color: #3399ff;
}
.fa.fa-deviantart {
  color: #4e6252;
}
.fa.fa-digg {
  color: #000;
}
.fa.fa-dribbble {
  color: #444444;
}
.fa.fa-dropbox {
  color: #007ee5;
}
.fa.fa-drupal {
  color: #0077c0;
}
.fa.fa-empire {
  color: #000;
}
.fa.fa-expeditedssl {
  color: #343433;
}
.fa.fa-facebook {
  color: #3b5998;
}
.fa.fa-facebook-official {
  color: #3b5998;
}
.fa.fa-facebook-square {
  color: #3b5998;
}
.fa.fa-firefox {
  color: #e66000;
}
.fa.fa-flickr {
  color: #ff0084;
}
.fa.fa-fonticons {
  color: #1c1e29;
}
.fa.fa-forumbee {
  color: #83ad13;
}
.fa.fa-foursquare {
  color: #0072b1;
}
.fa.fa-ge {
  color: #000;
}
.fa.fa-get-pocket {
  color: #d3505a;
}
.fa.fa-gg {
  color: #000;
}
.fa.fa-gg-circle {
  color: #000;
}
.fa.fa-git {
  color: #333;
}
.fa.fa-git-square {
  color: #333;
}
.fa.fa-github {
  color: #333;
}
.fa.fa-github-alt {
  color: #333;
}
.fa.fa-github-square {
  color: #333;
}
.fa.fa-gittip {
  color: #663300;
}
.fa.fa-google {
  color: #4285f4;
}
.fa.fa-google-plus {
  color: #dd4b39;
}
.fa.fa-google-plus-square {
  color: #dd4b39;
}
.fa.fa-google-wallet {
  color: #4285f4;
}
.fa.fa-hacker-news {
  color: #ff6600;
}
.fa.fa-houzz {
  color: #7ac142;
}
.fa.fa-html5 {
  color: #e34f26;
}
.fa.fa-instagram {
  color: #3f729b;
}
.fa.fa-internet-explorer {
  color: #1ebbee;
}
.fa.fa-ioxhost {
  color: #faa729;
}
.fa.fa-joomla {
  color: #142849;
}
.fa.fa-jsfiddle {
  color: #4679bd;
}
.fa.fa-lastfm {
  color: #c3000d;
}
.fa.fa-lastfm-square {
  color: #c3000d;
}
.fa.fa-leanpub {
  color: #0c0c0c;
}
.fa.fa-linkedin {
  color: #0976b4;
}
.fa.fa-linkedin-square {
  color: #0976b4;
}
.fa.fa-linux {
  color: #333333;
}
.fa.fa-maxcdn {
  color: #ff6600;
}
.fa.fa-meanpath {
  color: #538ed7;
}
.fa.fa-medium {
  color: #000;
}
.fa.fa-odnoklassniki {
  color: #ed812b;
}
.fa.fa-odnoklassniki-square {
  color: #ed812b;
}
.fa.fa-opencart {
  color: #2ac2ef;
}
.fa.fa-openid {
  color: #f78c40;
}
.fa.fa-opera {
  color: #cc0f16;
}
.fa.fa-optin-monster {
  color: #83c11f;
}
.fa.fa-pagelines {
  color: #000;
}
.fa.fa-paypal {
  color: #253b80;
}
.fa.fa-pied-piper {
  color: #2f9f46;
}
.fa.fa-pied-piper-alt {
  color: #2f9f46;
}
.fa.fa-pied-piper-square {
  color: #2f9f46;
}
.fa.fa-pinterest {
  color: #cc2127;
}
.fa.fa-pinterest-p {
  color: #cc2127;
}
.fa.fa-pinterest-square {
  color: #cc2127;
}
.fa.fa-qq {
  color: #000;
}
.fa.fa-ra {
  color: #000;
}
.fa.fa-rebel {
  color: #000;
}
.fa.fa-reddit {
  color: #ff4500;
}
.fa.fa-reddit-square {
  color: #ff4500;
}
.fa.fa-renren {
  color: #005eac;
}
.fa.fa-safari {
  color: #1b88ca;
}
.fa.fa-sellsy {
  color: #1f78b9;
}
.fa.fa-share-alt {
  color: #01bf01;
}
.fa.fa-share-alt-square {
  color: #01bf01;
}
.fa.fa-shirtsinbulk {
  color: #dd3a26;
}
.fa.fa-simplybuilt {
  color: #000;
}
.fa.fa-skyatlas {
  color: #00adbb;
}
.fa.fa-skype {
  color: #00aff0;
}
.fa.fa-slack {
  color: #0f7965;
}
.fa.fa-slideshare {
  color: #e98325;
}
.fa.fa-soundcloud {
  color: #f80;
}
.fa.fa-spotify {
  color: #7ab800;
}
.fa.fa-stack-exchange {
  color: #000;
}
.fa.fa-stack-overflow {
  color: #fe7a15;
}
.fa.fa-steam {
  color: #0b0b0b;
}
.fa.fa-steam-square {
  color: #0b0b0b;
}
.fa.fa-stumbleupon {
  color: #eb4924;
}
.fa.fa-stumbleupon-circle {
  color: #eb4924;
}
.fa.fa-tencent-weibo {
  color: #74af2c;
}
.fa.fa-trello {
  color: #256a92;
}
.fa.fa-tripadvisor {
  color: #589442;
}
.fa.fa-tumblr {
  color: #35465c;
}
.fa.fa-tumblr-square {
  color: #35465c;
}
.fa.fa-twitch {
  color: #6441a5;
}
.fa.fa-twitter {
  color: #55acee;
}
.fa.fa-twitter-square {
  color: #55acee;
}
.fa.fa-viacoin {
  color: #333;
}
.fa.fa-vimeo {
  color: #1ab7ea;
}
.fa.fa-vimeo-square {
  color: #1ab7ea;
}
.fa.fa-vine {
  color: #00b488;
}
.fa.fa-vk {
  color: #45668e;
}
.fa.fa-wechat {
  color: #93d034;
}
.fa.fa-weibo {
  color: #e71d34;
}
.fa.fa-weixin {
  color: #93d034;
}
.fa.fa-wikipedia-w {
  color: #000;
}
.fa.fa-windows {
  color: #00bcf2;
}
.fa.fa-wordpress {
  color: #21759b;
}
.fa.fa-xing {
  color: #026466;
}
.fa.fa-xing-square {
  color: #026466;
}
.fa.fa-y-combinator {
  color: #f0652f;
}
.fa.fa-yc {
  color: #f0652f;
}
.fa.fa-yahoo {
  color: #400191;
}
.fa.fa-yelp {
  color: #af0606;
}
.fa.fa-youtube {
  color: #e52d27;
}
.fa.fa-youtube-play {
  color: #e52d27;
}
.fa.fa-youtube-square {
  color: #e52d27;
}

إذا كنت تريد تخصيص أيقونة معينة، يمكنك إضافة الأنماط مباشرة داخل علامة  باستخدام خاصية style. على سبيل المثال:

<i class='fas fa-heart' style='font-size:18px; color:red;'></i>

قائمة بأيقونات FontAwesome

فيما يلي قائمة ببعض أيقونات FontAwesome الشائعة:


<i class="fa fa-500px"></i>
<i class="fa fa-adn"></i>
<i class="fa fa-amazon"></i>
<i class="fa fa-android"></i>
<i class="fa fa-angellist"></i>
<i class="fa fa-apple"></i>
<i class="fa fa-behance"></i>
<i class="fa fa-behance-square"></i>
<i class="fa fa-bitbucket"></i>
<i class="fa fa-bitbucket-square"></i>
<i class="fa fa-bitcoin"></i>
<i class="fa fa-btc"></i>
<i class="fa fa-black-tie"></i>
<i class="fa fa-buysellads"></i>
<i class="fa fa-cc-amex"></i>
<i class="fa fa-cc-diners-club"></i>
<i class="fa fa-cc-discover"></i>
<i class="fa fa-cc-jcb"></i>
<i class="fa fa-cc-mastercard"></i>
<i class="fa fa-cc-paypal"></i>
<i class="fa fa-cc-stripe"></i>
<i class="fa fa-cc-visa"></i>
<i class="fa fa-chrome"></i>
<i class="fa fa-codepen"></i>
<i class="fa fa-connectdevelop"></i>
<i class="fa fa-contao"></i>
<i class="fa fa-creative-commons"></i>
<i class="fa fa-css3"></i>
<i class="fa fa-dashcube"></i>
<i class="fa fa-delicious"></i>
<i class="fa fa-deviantart"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-drupal"></i>
<i class="fa fa-empire"></i>
<i class="fa fa-expeditedssl"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-firefox"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-fonticons"></i>
<i class="fa fa-forumbee"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-ge"></i>
<i class="fa fa-get-pocket"></i>
<i class="fa fa-gg"></i>
<i class="fa fa-gg-circle"></i>
<i class="fa fa-git"></i>
<i class="fa fa-git-square"></i>
<i class="fa fa-github"></i>
<i class="fa fa-github-alt"></i>
<i class="fa fa-github-square"></i>
<i class="fa fa-gittip"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-google-plus-square"></i>
<i class="fa fa-google-wallet"></i>
<i class="fa fa-hacker-news"></i>
<i class="fa fa-houzz"></i>
<i class="fa fa-html5"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-internet-explorer"></i>
<i class="fa fa-ioxhost"></i>
<i class="fa fa-joomla"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-lastfm"></i>
<i class="fa fa-lastfm-square"></i>
<i class="fa fa-leanpub"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-linkedin-square"></i>
<i class="fa fa-linux"></i>
<i class="fa fa-maxcdn"></i>
<i class="fa fa-meanpath"></i>
<i class="fa fa-medium"></i>
<i class="fa fa-odnoklassniki"></i>
<i class="fa fa-odnoklassniki-square"></i>
<i class="fa fa-opencart"></i>
<i class="fa fa-openid"></i>
<i class="fa fa-opera"></i>
<i class="fa fa-optin-monster"></i>
<i class="fa fa-pagelines"></i>
<i class="fa fa-paypal"></i>
<i class="fa fa-pied-piper"></i>
<i class="fa fa-pied-piper-alt"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-pinterest-p"></i>
<i class="fa fa-pinterest-square"></i>
<i class="fa fa-qq"></i>
<i class="fa fa-ra"></i>
<i class="fa fa-rebel"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-reddit-square"></i>
<i class="fa fa-renren"></i>
<i class="fa fa-safari"></i>
<i class="fa fa-sellsy"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-share-alt-square"></i>
<i class="fa fa-shirtsinbulk"></i>
<i class="fa fa-simplybuilt"></i>
<i class="fa fa-skyatlas"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-slack"></i>
<i class="fa fa-slideshare"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-steam"></i>
<i class="fa fa-steam-square"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-stumbleupon-circle"></i>
<i class="fa fa-tencent-weibo"></i>
<i class="fa fa-trello"></i>
<i class="fa fa-tripadvisor"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-tumblr-square"></i>
<i class="fa fa-twitch"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-viacoin"></i>
<i class="fa fa-vimeo"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-vine"></i>
<i class="fa fa-vk"></i>
<i class="fa fa-weibo"></i>
<i class="fa fa-wechat"></i>
<i class="fa fa-weixin"></i>
<i class="fa fa-wikipedia-w"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-xing"></i>
<i class="fa fa-xing-square"></i>
<i class="fa fa-y-combinator"></i>
<i class="fa fa-yc"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-yelp"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-youtube-square"></i>

معاينة الكود


<div>
  <table class="tbl">
    <tr>
      <td><i class="fa fa-500px"></i></td>
      <td><i class="fa fa-adn"></i></td>
      <td><i class="fa fa-amazon"></i></td>
      <td><i class="fa fa-android"></i></td>
      <td><i class="fa fa-angellist"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-apple"></i></td>
      <td><i class="fa fa-behance"></i></td>
      <td><i class="fa fa-behance-square"></i></td>
      <td><i class="fa fa-bitbucket"></i></td>
      <td><i class="fa fa-bitbucket-square"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-bitcoin"></i></td>
      <td><i class="fa fa-btc"></i></td>
      <td><i class="fa fa-black-tie"></i></td>
      <td><i class="fa fa-buysellads"></i></td>
      <td><i class="fa fa-cc-amex"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-cc-diners-club"></i></td>
      <td><i class="fa fa-cc-discover"></i></td>
      <td><i class="fa fa-cc-jcb"></i></td>
      <td><i class="fa fa-cc-mastercard"></i></td>
      <td><i class="fa fa-cc-paypal"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-cc-stripe"></i></td>
      <td><i class="fa fa-cc-visa"></i></td>
      <td><i class="fa fa-chrome"></i></td>
      <td><i class="fa fa-codepen"></i></td>
      <td><i class="fa fa-connectdevelop"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-contao"></i></td>
      <td><i class="fa fa-creative-commons"></i></td>
      <td><i class="fa fa-css3"></i></td>
      <td><i class="fa fa-dashcube"></i></td>
      <td><i class="fa fa-delicious"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-deviantart"></i></td>
      <td><i class="fa fa-digg"></i></td>
      <td><i class="fa fa-dribbble"></i></td>
      <td><i class="fa fa-dropbox"></i></td>
      <td><i class="fa fa-drupal"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-empire"></i></td>
      <td><i class="fa fa-expeditedssl"></i></td>
      <td><i class="fa fa-facebook"></i></td>
      <td><i class="fa fa-facebook-official"></i></td>
      <td><i class="fa fa-facebook-square"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-firefox"></i></td>
      <td><i class="fa fa-flickr"></i></td>
      <td><i class="fa fa-fonticons"></i></td>
      <td><i class="fa fa-forumbee"></i></td>
      <td><i class="fa fa-foursquare"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-ge"></i></td>
      <td><i class="fa fa-get-pocket"></i></td>
      <td><i class="fa fa-gg"></i></td>
      <td><i class="fa fa-gg-circle"></i></td>
      <td><i class="fa fa-git"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-git-square"></i></td>
      <td><i class="fa fa-github"></i></td>
      <td><i class="fa fa-github-alt"></i></td>
      <td><i class="fa fa-github-square"></i></td>
      <td><i class="fa fa-gittip"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-google"></i></td>
      <td><i class="fa fa-google-plus"></i></td>
      <td><i class="fa fa-google-plus-square"></i></td>
      <td><i class="fa fa-google-wallet"></i></td>
      <td><i class="fa fa-hacker-news"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-houzz"></i></td>
      <td><i class="fa fa-html5"></i></td>
      <td><i class="fa fa-instagram"></i></td>
      <td><i class="fa fa-internet-explorer"></i></td>
      <td><i class="fa fa-ioxhost"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-joomla"></i></td>
      <td><i class="fa fa-jsfiddle"></i></td>
      <td><i class="fa fa-lastfm"></i></td>
      <td><i class="fa fa-lastfm-square"></i></td>
      <td><i class="fa fa-leanpub"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-linkedin"></i></td>
      <td><i class="fa fa-linkedin-square"></i></td>
      <td><i class="fa fa-linux"></i></td>
      <td><i class="fa fa-maxcdn"></i></td>
      <td><i class="fa fa-meanpath"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-medium"></i></td>
      <td><i class="fa fa-odnoklassniki"></i></td>
      <td><i class="fa fa-odnoklassniki-square"></i></td>
      <td><i class="fa fa-opencart"></i></td>
      <td><i class="fa fa-openid"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-opera"></i></td>
      <td><i class="fa fa-optin-monster"></i></td>
      <td><i class="fa fa-pagelines"></i></td>
      <td><i class="fa fa-paypal"></i></td>
      <td><i class="fa fa-pied-piper"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-pied-piper-alt"></i></td>
      <td><i class="fa fa-pinterest"></i></td>
      <td><i class="fa fa-pinterest-p"></i></td>
      <td><i class="fa fa-pinterest-square"></i></td>
      <td><i class="fa fa-qq"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-ra"></i></td>
      <td><i class="fa fa-rebel"></i></td>
      <td><i class="fa fa-reddit"></i></td>
      <td><i class="fa fa-reddit-square"></i></td>
      <td><i class="fa fa-renren"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-safari"></i></td>
      <td><i class="fa fa-sellsy"></i></td>
      <td><i class="fa fa-share-alt"></i></td>
      <td><i class="fa fa-share-alt-square"></i></td>
      <td><i class="fa fa-shirtsinbulk"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-simplybuilt"></i></td>
      <td><i class="fa fa-skyatlas"></i></td>
      <td><i class="fa fa-skype"></i></td>
      <td><i class="fa fa-slack"></i></td>
      <td><i class="fa fa-slideshare"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-soundcloud"></i></td>
      <td><i class="fa fa-spotify"></i></td>
      <td><i class="fa fa-stack-exchange"></i></td>
      <td><i class="fa fa-stack-overflow"></i></td>
      <td><i class="fa fa-steam"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-steam-square"></i></td>
      <td><i class="fa fa-stumbleupon"></i></td>
      <td><i class="fa fa-stumbleupon-circle"></i></td>
      <td><i class="fa fa-tencent-weibo"></i></td>
      <td><i class="fa fa-trello"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-tripadvisor"></i></td>
      <td><i class="fa fa-tumblr"></i></td>
      <td><i class="fa fa-tumblr-square"></i></td>
      <td><i class="fa fa-twitch"></i></td>
      <td><i class="fa fa-twitter"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-twitter-square"></i></td>
      <td><i class="fa fa-viacoin"></i></td>
      <td><i class="fa fa-vimeo"></i></td>
      <td><i class="fa fa-vimeo-square"></i></td>
      <td><i class="fa fa-vine"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-vk"></i></td>
      <td><i class="fa fa-weibo"></i></td>
      <td><i class="fa fa-wechat"></i></td>
      <td><i class="fa fa-weixin"></i></td>
      <td><i class="fa fa-wikipedia-w"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-windows"></i></td>
      <td><i class="fa fa-wordpress"></i></td>
      <td><i class="fa fa-xing"></i></td>
      <td><i class="fa fa-xing-square"></i></td>
      <td><i class="fa fa-y-combinator"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-yc"></i></td>
      <td><i class="fa fa-yahoo"></i></td>
      <td><i class="fa fa-yelp"></i></td>
      <td><i class="fa fa-youtube"></i></td>
      <td><i class="fa fa-youtube-play"></i></td>
    </tr>
    <tr>
      <td><i class="fa fa-youtube-square"></i></td>
    </tr>
  </table>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
  padding: 1em 1em 0;
}
body .fa {
  font-size: 3em;
  width: 2em;
  height: 1.5em;
  text-align: center;
}
.fa {
  color: #efefef;
}
.fa.fa-500px {
  color: #0099e5;
}
.fa.fa-adn {
  color: #4a484c;
}
.fa.fa-amazon {
  color: #ff9900;
}
.fa.fa-android {
  color: #a4c639;
}
.fa.fa-angellist {
  color: #000;
}
.fa.fa-apple {
  color: #979797;
}
.fa.fa-behance {
  color: #1769ff;
}
.fa.fa-behance-square {
  color: #1769ff;
}
.fa.fa-bitbucket {
  color: #205081;
}
.fa.fa-bitbucket-square {
  color: #205081;
}
.fa.fa-bitcoin {
  color: #ee9209;
}
.fa.fa-black-tie {
  color: #222;
}
.fa.fa-btc {
  color: #ee9209;
}
.fa.fa-buysellads {
  color: #c90100;
}
.fa.fa-cc-amex {
  color: #007bc1;
}
.fa.fa-cc-diners-club {
  color: #004a97;
}
.fa.fa-cc-discover {
  color: #f68121;
}
.fa.fa-cc-jcb {
  color: #003a8f;
}
.fa.fa-cc-mastercard {
  color: #0a3a82;
}
.fa.fa-cc-paypal {
  color: #253b80;
}
.fa.fa-cc-stripe {
  color: #00afe1;
}
.fa.fa-cc-visa {
  color: #0157a2;
}
.fa.fa-chrome {
  color: #4587f3;
}
.fa.fa-codepen {
  color: #000;
}
.fa.fa-connectdevelop {
  color: #391448;
}
.fa.fa-contao {
  color: #eb8623;
}
.fa.fa-creative-commons {
  color: #231f20;
}
.fa.fa-css3 {
  color: #1680c0;
}
.fa.fa-dashcube {
  color: #7f7f7f;
}
.fa.fa-delicious {
  color: #3399ff;
}
.fa.fa-deviantart {
  color: #4e6252;
}
.fa.fa-digg {
  color: #000;
}
.fa.fa-dribbble {
  color: #444444;
}
.fa.fa-dropbox {
  color: #007ee5;
}
.fa.fa-drupal {
  color: #0077c0;
}
.fa.fa-empire {
  color: #000;
}
.fa.fa-expeditedssl {
  color: #343433;
}
.fa.fa-facebook {
  color: #3b5998;
}
.fa.fa-facebook-official {
  color: #3b5998;
}
.fa.fa-facebook-square {
  color: #3b5998;
}
.fa.fa-firefox {
  color: #e66000;
}
.fa.fa-flickr {
  color: #ff0084;
}
.fa.fa-fonticons {
  color: #1c1e29;
}
.fa.fa-forumbee {
  color: #83ad13;
}
.fa.fa-foursquare {
  color: #0072b1;
}
.fa.fa-ge {
  color: #000;
}
.fa.fa-get-pocket {
  color: #d3505a;
}
.fa.fa-gg {
  color: #000;
}
.fa.fa-gg-circle {
  color: #000;
}
.fa.fa-git {
  color: #333;
}
.fa.fa-git-square {
  color: #333;
}
.fa.fa-github {
  color: #333;
}
.fa.fa-github-alt {
  color: #333;
}
.fa.fa-github-square {
  color: #333;
}
.fa.fa-gittip {
  color: #663300;
}
.fa.fa-google {
  color: #4285f4;
}
.fa.fa-google-plus {
  color: #dd4b39;
}
.fa.fa-google-plus-square {
  color: #dd4b39;
}
.fa.fa-google-wallet {
  color: #4285f4;
}
.fa.fa-hacker-news {
  color: #ff6600;
}
.fa.fa-houzz {
  color: #7ac142;
}
.fa.fa-html5 {
  color: #e34f26;
}
.fa.fa-instagram {
  color: #3f729b;
}
.fa.fa-internet-explorer {
  color: #1ebbee;
}
.fa.fa-ioxhost {
  color: #faa729;
}
.fa.fa-joomla {
  color: #142849;
}
.fa.fa-jsfiddle {
  color: #4679bd;
}
.fa.fa-lastfm {
  color: #c3000d;
}
.fa.fa-lastfm-square {
  color: #c3000d;
}
.fa.fa-leanpub {
  color: #0c0c0c;
}
.fa.fa-linkedin {
  color: #0976b4;
}
.fa.fa-linkedin-square {
  color: #0976b4;
}
.fa.fa-linux {
  color: #333333;
}
.fa.fa-maxcdn {
  color: #ff6600;
}
.fa.fa-meanpath {
  color: #538ed7;
}
.fa.fa-medium {
  color: #000;
}
.fa.fa-odnoklassniki {
  color: #ed812b;
}
.fa.fa-odnoklassniki-square {
  color: #ed812b;
}
.fa.fa-opencart {
  color: #2ac2ef;
}
.fa.fa-openid {
  color: #f78c40;
}
.fa.fa-opera {
  color: #cc0f16;
}
.fa.fa-optin-monster {
  color: #83c11f;
}
.fa.fa-pagelines {
  color: #000;
}
.fa.fa-paypal {
  color: #253b80;
}
.fa.fa-pied-piper {
  color: #2f9f46;
}
.fa.fa-pied-piper-alt {
  color: #2f9f46;
}
.fa.fa-pied-piper-square {
  color: #2f9f46;
}
.fa.fa-pinterest {
  color: #cc2127;
}
.fa.fa-pinterest-p {
  color: #cc2127;
}
.fa.fa-pinterest-square {
  color: #cc2127;
}
.fa.fa-qq {
  color: #000;
}
.fa.fa-ra {
  color: #000;
}
.fa.fa-rebel {
  color: #000;
}
.fa.fa-reddit {
  color: #ff4500;
}
.fa.fa-reddit-square {
  color: #ff4500;
}
.fa.fa-renren {
  color: #005eac;
}
.fa.fa-safari {
  color: #1b88ca;
}
.fa.fa-sellsy {
  color: #1f78b9;
}
.fa.fa-share-alt {
  color: #01bf01;
}
.fa.fa-share-alt-square {
  color: #01bf01;
}
.fa.fa-shirtsinbulk {
  color: #dd3a26;
}
.fa.fa-simplybuilt {
  color: #000;
}
.fa.fa-skyatlas {
  color: #00adbb;
}
.fa.fa-skype {
  color: #00aff0;
}
.fa.fa-slack {
  color: #0f7965;
}
.fa.fa-slideshare {
  color: #e98325;
}
.fa.fa-soundcloud {
  color: #f80;
}
.fa.fa-spotify {
  color: #7ab800;
}
.fa.fa-stack-exchange {
  color: #000;
}
.fa.fa-stack-overflow {
  color: #fe7a15;
}
.fa.fa-steam {
  color: #0b0b0b;
}
.fa.fa-steam-square {
  color: #0b0b0b;
}
.fa.fa-stumbleupon {
  color: #eb4924;
}
.fa.fa-stumbleupon-circle {
  color: #eb4924;
}
.fa.fa-tencent-weibo {
  color: #74af2c;
}
.fa.fa-trello {
  color: #256a92;
}
.fa.fa-tripadvisor {
  color: #589442;
}
.fa.fa-tumblr {
  color: #35465c;
}
.fa.fa-tumblr-square {
  color: #35465c;
}
.fa.fa-twitch {
  color: #6441a5;
}
.fa.fa-twitter {
  color: #55acee;
}
.fa.fa-twitter-square {
  color: #55acee;
}
.fa.fa-viacoin {
  color: #333;
}
.fa.fa-vimeo {
  color: #1ab7ea;
}
.fa.fa-vimeo-square {
  color: #1ab7ea;
}
.fa.fa-vine {
  color: #00b488;
}
.fa.fa-vk {
  color: #45668e;
}
.fa.fa-wechat {
  color: #93d034;
}
.fa.fa-weibo {
  color: #e71d34;
}
.fa.fa-weixin {
  color: #93d034;
}
.fa.fa-wikipedia-w {
  color: #000;
}
.fa.fa-windows {
  color: #00bcf2;
}
.fa.fa-wordpress {
  color: #21759b;
}
.fa.fa-xing {
  color: #026466;
}
.fa.fa-xing-square {
  color: #026466;
}
.fa.fa-y-combinator {
  color: #f0652f;
}
.fa.fa-yc {
  color: #f0652f;
}
.fa.fa-yahoo {
  color: #400191;
}
.fa.fa-yelp {
  color: #af0606;
}
.fa.fa-youtube {
  color: #e52d27;
}
.fa.fa-youtube-play {
  color: #e52d27;
}
.fa.fa-youtube-square {
  color: #e52d27;
}

</style>

الخلاصــــة

أيقونات FontAwesome هي أداة قوية وفعالة لتحسين مظهر موقعك أو مدونتك. بفضل سهولة استخدامها وقابليتها للتخصيص، يمكنك إنشاء تصميمات جذابة ومهنية دون الحاجة إلى مهارات برمجية متقدمة. جربها الآن وقم بتطبيقها على مدونتك لتحقيق أفضل النتائج!

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

مكتبة FontAwesome روابط وايقونات ورموز

أيقونات FontAwesome: إضافة رائعة لتزيين المواقع والمدونات

فوائد استخدام أيقونات FontAwesome

كيفية استخدام أيقونات FontAwesome في مدونة بلوجر

تخصيص الأيقونات باستخدام CSS

قائمة بأيقونات FontAwesome

معاينة الكود

الخلاصــــة

Post a Comment

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

كيفية إنشاء صندوق ملاحظات ملون على مدونة

طريقة حذف الرمز ?m=1 في رابط مدونتك أو موقعك على بلوجر

اهم مكتبات خطوط لمدونات بلوجر

تصميم مبتكر تثبيت العناصر في بلوجر بخطوات بسيطة

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار