أهلاً بك في منتدى انكور التطويري

شرفتنا بحضورك لمنتدى انكور التطويري، المجتمع العربي للمحتوى المفيد والحصري حيث ستجد لدينا ما تحتاج لتزيد من معرفتك وخبراتك والمساحة الآمنة لنشر معرفتك ومشاركتها مع الاعضاء والزوار
تسجيل

ما هو Font Awesome؟

Admin

Admin

مدير شركة انكور التطويرية
طاقم الإدارة
ادارة انكور
بسم الله الرحمن الرحيم​

Font Awesome هو مكتبة رموز وأيقونات مفتوحة المصدر تمكن المطورين من إدراج رموز أيقونات جاهزة للاستخدام مباشرة في صفحات الويب. يوفر Font Awesome مجموعة ضخمة من الرموز التي تغطي مختلف المجالات مثل الوسائط الاجتماعية، والتجارة الإلكترونية، والتنقل، والتكنولوجيا، وغيرها الكثير. تمتاز Font Awesome بالسهولة في الاستخدام والتخصيص، مما يجعلها أداة رائعة لتحسين تصميم وظيفة المواقع والتطبيقات.
​
ما هو Font Awesome؟​

كيفية استخدام Font Awesome​

1. تضمين Font Awesome في مشروعك: يمكنك تضمين مكتبة Font Awesome في مشروعك عن طريق إضافة رابط لملف CSS الخاص بها إلى صفحات HTML الخاصة بك. يمكنك فعل ذلك عن طريق إضافة الكود التالي داخل عنصر <head>:
HTML: 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-W74RkpDQqu9vmJr8QsXhJdz5Jnm77C0NsTZegvrcO7xTZ3Zz5u6V04EdvZOrWywuAtkIxP7wniyT9/ZoUkU6JQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
يجب استبدال الرابط المذكور بالإصدار الأحدث من Font Awesome إذا كان متاحًا. مثلا هذا رابط للاصدار الخامس
HTML: 
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
2. استخدام الرموز في صفحات HTML: بمجرد تضمين Font Awesome، يمكنك استخدام الرموز في صفحات HTML الخاصة بك باستخدام عناصر <i> أو <span> وإضافة فئات CSS محددة. على سبيل المثال:
HTML: 
<i class="fas fa-camera"></i> <!-- رمز كاميرا -->
<i class="fab fa-facebook"></i> <!-- رمز فيسبوك -->
حيث "fas" و "fab" تشير إلى أنواع الرموز (solid و brands) على التوالي، و "fa-camera" و "fa-facebook" تحدد الرموز المحددة.

3. تخصيص الرموز: يمكنك أيضًا تخصيص الرموز باستخدام CSS لتغيير الحجم، اللون، والأسلوب الأيقوني. على سبيل المثال:
CSS: 
.fa-camera {
    font-size: 24px;
    color: #007bff; /* اللون الأزرق */
}

Font Awesome تعد أداة قوية ومفيدة لإضافة رموز وأيقونات إلى مواقع الويب والتطبيقات. بفضل مجموعتها الواسعة من الرموز وسهولة استخدامها، تساعد Font Awesome المطورين على تحسين تجربة المستخدم وجعل تصميماتهم أكثر جاذبية ووظيفية.​
 
Font Awesome

كود: 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

كود: 
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
  • Like
التفاعلات: Admin
Admin قال:

3. تخصيص الرموز: يمكنك أيضًا تخصيص الرموز باستخدام CSS لتغيير الحجم، اللون، والأسلوب الأيقوني. على سبيل المثال:
CSS: 
.fa-camera {
    font-size: 24px;
    color: #007bff; /* اللون الأزرق */
}

​
أنقر للتوسيع...
بارك الله فيك
كيف يمكن تخصيص الرموز في اكواد جافا ؟
الحجم و اللون
 
Mr.Google قال:
كيف يمكن تخصيص الرموز في اكواد جافا ؟
أنقر للتوسيع...
تخصيصها يكون Css عن طريق وسم الرمز ومن ثم color و font-size ولكن هذا كود مع شرحه في حال اردت تعديل الـ Css من خلال الجافا
JavaScript: 
// الحصول على العنصر الذي يحتوي على الرمز
var iconElement = document.getElementById('iconElement');

// تغيير فئة الرمز
iconElement.children[0].classList.remove('fa-heart');
iconElement.children[0].classList.add('fa-star');

// تغيير لون الرمز
iconElement.children[0].style.color = 'blue';

// تغيير حجم الرمز
iconElement.children[0].style.fontSize = '24px';

// تغيير السمات (مثل السمات الخاصة بالبيانات)
iconElement.children[0].setAttribute('data-custom', 'value');
 
موضوع غاية في الأهمية. و يحتاج إلى تدريب و تركيز و ممارسة مستمرة.
استخدم هذا الموقع منذ سنوات، و قد سهل علي التصميم و خفة الصفحات.
يرعاك الله
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.

✔ نبذة عنا

منتدى انكور التطويري لدعم وتطوير المواقع والمنتديات والمحتوى العربي. نسعى للارتقاء في المحتوى العربي وتقديم الخدمات المتنوعة لأصحاب المواقع والمنتديات بأحدث الامكانيات والشروحات مجانًا.

🚀 روابط نصية

◃منتديات واب تونس◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

◃رابط نصي ◃رابط نصي ◃رابط نصي ◃رابط نصي

عودة
أعلى