 |
| إضافة لمسة إبداعية لموقعك مع أزرار تحميل وعرض بأيقونة الخط Font Awesome |
إضافة أزرار تحميل ومعاينة بأيقونة الخط Font Awesome
ما هي مكتبة Font Awesome؟
Font Awesome هي مكتبة مفتوحة المصدر تضم مجموعة واسعة من الأيقونات القابلة للتخصيص. توفر هذه المكتبة أيقونات بأحجام وألوان وأساليب مختلفة، مما يجعلها أداة مثالية لتصميم واجهات مواقع الويب.
فوائد استخدام Font Awesome مع الأزرار
- التصميم الجذاب: تضيف الأيقونات لمسة بصرية تجعل الأزرار أكثر جاذبية واحترافية.
- تحسين تجربة المستخدم: تساعد الأيقونات في إيصال الغرض من الزر بوضوح وسرعة.
- سهولة التخصيص: يمكنك تعديل الأيقونات بسهولة لتتناسب مع تصميم موقعك.
- تحميل سريع: Font Awesome خفيفة الوزن ولا تؤثر بشكل كبير على سرعة تحميل الموقع.
كيفية إضافة Font Awesome إلى موقعك
إضافة مكتبة Font Awesome:
يمكنك إضافة المكتبة عن طريق تضمين الرابط التالي في قسم <head> من ملف HTML الخاص بموقعك:
<a class="buttonhcv demohcv" href="link button" rel="nofollow" target="_blank">Demo</a>
تخصيص الازرار باستخدام CSS:
ملاحظات مهمة:
لتحسين مظهر الزر، يمكنك إضافة التنسيق التالي:
تركيب الاكواد
الخطوة الأولى: لوحة التحكم
1 قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر:
2 انتقل للمدونة >> ثم إلى المظهر >> ثم اضغط على تحرير Edit HTML
3 اضغط في وسط محرر الأكواد ثم f + ctrl لإظهار مربع البحث
4 باستعمال الزر c + ctrl للنسخ و v + ctrl للصق قم بوضع الأكواد في المكان المناسب
الخطوة الثانية: تركيب الأكواد
قم بالبحث عن هذا الوسم
a.buttonhcv {
background-size: 300% 100%!important;
background: linear-gradient(-225deg,#7742B2 0%,#F180FF 52%,#FD8BD9 100%);
position: relative;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 0 30px;
font-size: 14px;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
margin: 15px 10px;
text-transform: uppercase;
box-shadow: 4px 4px 15px rgba(0,0,0,0.1);
font-weight: 500;
}
a.buttonhcv:hover{
opacity: .8;
color: #fff;
transition: .3s;
}
.buttonhcv:before {
font-family: "Font Awesome 5 Pro","Font Awesome 5 Brands";
font-weight: 900;
display: inline-block;
margin: 0 5px 0 0;
margin-left: -30px;
}
.buttonhcv.demohcv:before {
content: '\f06e';
display: inline-block;
margin-right: 30px;
background: rgba(0,0,0,0.18);
border-radius: 5px 0 0 5px;
width: 45px;
}
a.buttonhcv.demohcv {
background: linear-gradient(135deg,#ff4c2e 0%,#f9a82f 45%,#ff4c2e 77%,#f7352e 100%);
}
 |
| إضافة لمسة إبداعية لموقعك مع أزرار تحميل وعرض بأيقونة الخط Font Awesome |
استخدام كود HTML في المقالة لإنشاء زر التحميل او زر العرض .
اختر احد الاكواد او كلاهما الموضح أدناه لإنشاء الزر الذي تريد إظهاره.
زر التحميل:
<a class="buttonhcv downloadhcv" href="link button" rel="nofollow" target="_blank">Download</a>
زر المعاينة:
<a class="buttonhcv demohcv" href="link button" rel="nofollow" target="_blank">Demo</a>
نصائح لإبداعية أكبر
- اختيار الألوان: استخدم ألوانًا متناسقة مع هوية موقعك.
- استخدام الرسوم المتحركة: أضف تأثيرات انتقالية مثل تغيير اللون أو الحجم عند مرور المؤشر.
- التجاوب: تأكد من أن الأزرار تعمل بشكل جيد على مختلف الأجهزة.
- تنويع الأيقونات: استخدم أيقونات مختلفة لتوضيح الغرض من كل زر بوضوح.
الخاتمة
باستخدام مكتبة Font Awesome، يمكنك تحويل الأزرار العادية في موقعك إلى عناصر جذابة وواضحة تزيد من تفاعل المستخدمين مع موقعك. جرب هذه النصائح والأكواد لتحسين تجربة الزوار وإضافة لمسة احترافية مميزة لموقعك.
{مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ}