FontAwesome روابط وايقونات ورموز
أيقونات FontAwesome كما يوحي الاسم، رائعة واضافة رائعة لجميع المصممين
لتزيين موقع او مدونة بلوجر. يمكنك استخدام هذه الرموز على مدونتك وتطبيقات
الويب والتصميمات الرسومية وغير ذلك الكثير. هذه الرموز مفيدة للغاية ولهذا
السبب يتم استخدام هذه رموز FontAwesome من قبل العديد من الأشخاص يوما
بعد يوم. حتى الآن، يستخدم معظم المدونين المشهورين هذه الرموز على مدوناتهم
وتطبيقاتهم. هذه الرموز تزداد شعبية في اليوم التالي. إذن ما هي رموز
FontAwesome هذه، وكيف يمكنك استخدامها وماذا ستكون فائدة استخدام هذه الرموز
لك هو ما سنشرحه في هذا الشرح التعليمي.
1. ما هي رموز FontAwesome هذه؟
أيقونات FontAwesome هي أيقونات متجهة تعني أن هذه الأيقونات قابلة للتحجيم
إلى أي حجم وعرض مثالي بدقة عالية.
2. هل يمكننا تخصيص هذه الرموز في قالبنا؟
يمكن تخصيص هذه الرموز في الحجم والظل واللون وكل شيء يمكن تحقيقه باستخدام
نمط خط CSS. كل ما عليك فعله هو إضافة هذه الأنماط إلى ورقة أنماط CSS لقالب
مدونتك باستخدام الفئة i
3. هل يلزم وجود JavaScript لتشغيل هذه الرموز على مدونتي؟
هذا هو جمال هذه الرموز التي لا تحتاج إلى رمز JavaScript لتشغيل هذه الرموز على
مدونتك. لا مزيد من وقت التحميل ويعمل على جميع الأجهزة بشكل مثالي
4. هل هذه الرموز مجانية أو متميزة؟
هذه الرموز مجانية تمامًا للاستخدام بأي شكل من الأشكال (الاستخدام الشخصي أو
التجاري). صفقة جيدة، أليس كذلك؟
5. لماذا يجب علي استخدام هذه الرموز؟ لماذا لا PNG أو صور أخرى؟
هذا هو السؤال والجواب الممتازان رائعان. يتم تحميل هذه الرموز بسرعة 10 أضعاف
سرعة PNG أو ملفات الصور الأخرى وتقليل عدد طلبات HTTP لتحميل الصور على مدونتك.
يتم تحميل هذه الرموز كنص / خطوط أخرى لمدونتك. في نهاية المطاف، تعزز سرعة تحميل
مدونتك، وتكتسب المزيد من الزوار، وتعطي مظهرًا رائعًا لمدونتك وتساعدك في تحسين
محركات البحث للمدونة بطريقة أو بأخرى.
كيفية استخدام هذه الرموز على مدونتي؟
لاستخدام هذه الرموز في مدونتك، تحتاج إلى تعديل النموذج قليلا.
- انتقل إلى مدونة بلوجر ← القالب (من الأفضل اخد نسخة احتياطية للقالب) ← تحرير القالب
- قم بالدخول لتعديل قالب بلوجر.
- الآن اضغط على 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>
فوق الرمز هو ورقة أنماط CSS لرموز FontAawesome. يمكنك الآن وضع أي رمز
للظهور في أي مكان مع علامة <i> بسيطة في HTML، على سبيل المثال
داخل <div> أو <a> أو <li> أو <p> انظر المثال أدناه
كيف استخدمنا الرموز في روابط قائمة التنقل الخاصة بنا.
<li><a href="https://www.techsoune.com/"><i class="fas fa-home"></i>Home</a></li><li><a href="/p/contact-us.html"><i class="fas fa-envelope"></i>Contact Us</a></li>
لتغيير / استخدام رمز آخر، ما عليك سوى استبدال اسم الرمز باللون الأصفر <i
class='fas fa-home'> واسم الرمز مذكور فوق كل رمز هنا في
صفحة الايقونات FontAwesome . فقط استبدل اسم الرمز باللون
الأزرقباختيارك. على سبيل المثال
شاهد صورة بعض الرموز مع تسليط الضوء على أسمائها أدناه. fas الأول يبقى على حاله
والثاني يأتي مع اسم الرمز.
<i class="fas fa-laptop">
تخصيص الرموز باستخدام CSS
لتخصيص اللون والحجم والظل والخلفية، ما عليك سوى استدعاء العلامة (i) في CSS
ورسم هذه الرموز بإبداعك. يتم توفير رمز CSS أدناه لنسخ ولصق وتخصيص ببساطة. انسخ
الكود أعلاه والصقه قبل سطر الكود ]]></b:skin>مباشرة.
i {color:#E2FD18;font-size:15px;padding-right:5px;text-shadow: 1px 1px 1px #000;}
سيتم تطبيق تأثير CSS أعلاه على كل رمز في مدونتك. ولكن ماذا لو كنت تريد إعطاء
لون مختلف، وحجم، وظل، وما إلى ذلك، إلى رمز معين؟ لا تقلق، هل تعلم ماذا؟ هذه
أيقونات رائعة لذا ها هو الاختراق الآخر بالنسبة لك. إذا كنت ترغب في إعطاء تأثير
منفصل لرمز عن تأثير رمز آخر، فأنت بحاجة إلى تطبيق النمط داخل علامة <HTML
<i. هنا مثال:
<i class='fas fa-heart' style='font-size:18px; color:red />
بعد تطبيق النمط أعلاه داخل علامة HTML <i> سيكون حجم الرمز الخاص
بك 18 بكسل واللون الأحمر بينما يظل الآخر كما هو وفقًا للتأثير الذي طبقته CSS
على العلامة (i). في أي وقت إذا حدث أي خطأ، دعنا نساعدك. شكرا لكم.
Font awsome icons
<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>
Fontawsome codes
.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;}
معاينة الاكواد
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS