Font Awesome 5 Pro: دليلك الشامل لاستخدام الرموز في تصميم الويب
في عالم تصميم الويب، تُعتبر الرموز (Icons) عنصرًا أساسيًا لتحسين تجربة
المستخدم وجعل التصميمات أكثر جاذبية. ومن بين الأدوات الأكثر شهرة وفعالية
لتحقيق ذلك هي مكتبة Font Awesome 5 Pro. في هذا المقال، سنستعرض ما هي Font Awesome 5 Pro، وكيفية استخدامها، ولماذا تُعتبر خيارًا مثاليًا للمصممين
والمطورين.
ما هي Font Awesome 5 Pro؟
Font Awesome 5 Pro هي مكتبة خطوط رموز (Symbol Font) تحتوي على آلاف الرموز
التي يمكن استخدامها في مواقع الويب والتطبيقات. بدلاً من الاعتماد على الصور،
تستخدم Font Awesome خطوطًا قابلة للتخصيص باستخدام CSS، مما يجعلها خفيفة
الوزن وسهلة التكامل مع أي مشروع.
مميزات Font Awesome 5 Pro
- تنوع الرموز: تحتوي المكتبة على أكثر من 7,000 رمز، بما في ذلك الرموز العادية، والرموز ذات النمط الثابت (Solid)، والرموز ذات النمط الخفيف (Light)، والرموز ذات النمط العريض (Brands).
- سهولة الاستخدام: يمكن إضافة الرموز ببساطة باستخدام أكواد Html أو Css.
- التوافق مع أنظمة التشغيل: تعمل المكتبة على جميع أنظمة التشغيل الحديثة.
- التكامل مع Bootstrap: تعمل Font Awesome بشكل ممتاز مع إطار عمل Bootstrap، مما يجعلها مثالية لتصميمات الويب الحديثة.
- إمكانية التخصيص: يمكن تغيير حجم الرموز ولونها باستخدام CSS بسهولة.
كيفية استخدام Font Awesome 5 Pro
التثبيت 1
يمكنك تثبيت Font Awesome 5 Pro بعدة طرق:التثبيت عبر CDN:
أضف الرابط التالي في قسم <head> من ملف Html الخاص بك:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
التثبيت محليًا:
قم بتنزيل المكتبة من الموقع الرسمي Font Awesome وأضف ملفات الخطوط إلى مشروعك.
<i class="fas fa-home"></i> <!-- رمز المنزل -->
<i class="fab fa-twitter"></i> <!-- رمز تويتر -->
تخصيص الرموز 3
يمكنك تغيير حجم الرموز ولونها باستخدام Css:
.icon {
font-size: 24px;
color: #ff5733;
}
إصدار Font Awesome 5.15.2
تم إصدار تحديث جديد في 13 يناير 2021، والذي شمل:
- إضافة رموز جديدة متعلقة بـ COVID-19.
- إضافة رموز لعلامات تجارية جديدة مثل TikTok و Google Pay.
- تحديث رموز العلامات التجارية مثل Yahoo و TripAdvisor.
- تحسينات في اكتشاف التعارضات مع مكتبات أخرى.
فوائد استخدام Font Awesome 5 Pro
- تحسين أداء الموقع: نظرًا لأن الرموز تعتمد على الخطوط وليس الصور، فإنها تُقلل من وقت تحميل الصفحة.
- سهولة التحديث: يمكن تغيير الرموز وتخصيصها دون الحاجة إلى تحميل ملفات جديدة.
- دعم متصفحات متعددة: تعمل المكتبة على جميع المتصفحات الحديثة.
- توافق مع أنظمة إدارة المحتوى: يمكن استخدامها مع أنظمة مثل WordPress وBlogger.
اضافة Font Awesome الي بلوجر
إذا كنت تستخدم بلوجر يمكنك بسهولة إضافة Font Awesome إلى مدونتك:
اذهب الي لوحة تحكم بلوجر
حدد السمة تحرير HTML
أضف رابط CDN في قسم </head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
قم بلصق الكود التالي أعلى علامة الإغلاق </body>.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css");
//]]>
</script>
احفظ التغييرات وابدأ باستخدام الرموز في منشوراتك.
لذلك لقد قمت بإرشادك للتو إلى كيفية تثبيت واستخدام Font Awesome 5 Pro لـ بلوجر بكل بساطة. إذا كان لديك أي أسئلة، يرجى ترك تعليق أدناه وسوف أقوم بمساعدتك. حظ سعيد!
