أصبحت خطوط الأيقونات شائعة بين مصممي الويب والمطورين ، لأنها تسمح لك بإنشاء رموز ورموز فريدة لمواقع الويب. بدلا من استخدام الصور الرسومية ، يمكن عرض الرموز كنص ، مما يجعلها أكثر مرونة وسهولة في الاستخدام.
هناك عدة خطوات لإنشاء خطوط الرموز. أولا ، تحتاج إلى تحديد الرموز والرموز المناسبة التي تريد استخدامها. ثم ، تحتاج إلى تحميل مجموعة خاصة من الرموز ، مثل فونتاوسوم أو الرموز المادية. بعد ذلك ، يمكن إضافة هذه الرموز إلى صفحة الويب باستخدام علامة هتمل أو فئات كس.
يمكن أيضا استخدام خطوط الرموز لإنشاء الأزرار والقوائم والعناوين وعناصر التصميم الأخرى. عادة ما يكون لديهم أحجام وأنماط مختلفة ، مما يسمح لك بتكييفها مع احتياجات المشروع. بالإضافة إلى ذلك ، يمكن تغيير خطوط الأيقونات بسهولة باستخدام أنماط كس ، مما يجعلها أدوات مرنة وقوية للغاية لإنشاء مواقع ويب تفاعلية ومتقدمة.
- اختيار الخط المناسب
- توصيل خط الرمز بالموقع
- استخدام الرموز في ترميز هتمل
- إضافة أنماط إلى الرموز
- دعم رمز على مختلف الأجهزة
- استخدام الرموز في النص
- استخدام المتتالية من الرموز في المغلق
اختيار الخط المناسب
عند اختيار خط رمز ، يجب مراعاة العوامل التالية:
| نمط الخط | اختر خطا يطابق نمط مشروعك. إذا كان مشروعك يحتوي على تصميم حديث ، فاختر خطا بخطوط واضحة وتصميم بسيط. إذا كان مشروعك يحتوي على أسلوب كلاسيكي أو مرح ، فاختر خطا بتصميم أكثر إبداعا. |
| حجم الخط | تأكد من أن خط الرمز المحدد له أحجام مختلفة بحيث يمكنك استخدامه لأجزاء مختلفة من مشروعك. قد تكون بعض الرموز صغيرة وسيكون من الصعب تمييزها إذا كان حجم الخط صغيرا جدا. من ناحية أخرى ، يمكن أن يؤدي حجم الخط الكبير جدا إلى حدوث مشكلات في محاذاة الرموز ووضعها. |
| التوفر | تأكد من أن خط الرمز المحدد مدعوم من قبل جميع المتصفحات والأجهزة الضرورية. تأكد من أنه سيتم عرضه بشكل طبيعي على أجهزة محمولة وأنظمة تشغيل مختلفة. |
| الترخيص | تحقق من أن خط الرمز المحدد لديه الترخيص المناسب لمشروعك. قد يكون لبعض الخطوط قيود على الاستخدام التجاري أو تتطلب الدفع للحصول على ترخيص. |
من خلال اختيار خط الرمز المناسب ، يمكنك إنشاء تصميم مثير للإعجاب وتحسين تجربة المستخدم المرئية.
توصيل خط الرمز بالموقع
لاستخدام خط الرمز على موقع الويب الخاص بك ، يجب عليك أولا توصيله. اتبع الخطوات أدناه لإعداد خط الرمز بشكل صحيح على موقع الويب الخاص بك:
1. قم بتنزيل ملفات خط الرمز من الموقع الرسمي. عادة ما يتم توفير خطوط الرموز بتنسيقات.محكمة تكافؤ الفرص, .ووف,.صندوق النقد الدولي, .(سفغ). يمكنك تنزيل الأرشيف باستخدام الرمز ملفات الخط وفك ضغطه على جهاز الكمبيوتر الخاص بك.
2. قم بإنشاء مجلد جديد على خادم الويب أو الاستضافة وانسخ الرمز ملفات الخط إلى هذا المجلد.
3. افتح ملف كس من موقعك وإضافة التعليمات البرمجية التالية:
@الخط الوجه {
سرك: ورل('باث_شريفت/بلدي مخصص الرموز.محكمة تكافؤ الفرص');
سرك: ورل('باث_شريفت/بلدي مخصص الرموز.محكمة تكافؤ الفرص?# إيفيكس') شكل ('جزءا لا يتجزأ من أوبن'),عنوان ورل ('باث_شريفت_/بلدي مخصص الرموز.ووف 2') شكل ('ووف 2'),
url('путь_к_шрифту/my-custom-icons.woff') format('woff'),
url('путь_к_шрифту/my-custom-icons.ttf') format('truetype'),
url('путь_к_шрифту/my-custom-icons.svg#my-custom-icons') format('svg');
| font-weight: normal; | font-style: normal; |
|---|---|
| } | body { |
| font-family: 'my-custom-icons'; | } |
| Замените «путь_к_шрифту» на путь к папке, в которую вы скопировали файлы шрифта значков. |
4. احفظ ملف كس وقم بتوصيله بصفحة هتمل الخاصة بك عن طريق إضافة الكود التالي إلى القسم
| : | |
|---|---|
| استبدال "المسار إلى ملف كس" مع المسار إلى ملف كس الخاص بك. | |
| الآن يمكنك استخدام خط الرمز على موقع الويب الخاص بك عن طريق تحديد فئاته ورموزه في ترميز هتمل باستخدام قواعد كس المناسبة. | استخدام الرموز في ترميز هتمل |
| يمكن إضافة الرموز إلى ملف هتمل باستخدام رموز الأحرف على النحو التالي: | كود |
الأيقونة
▶
▶
★
❤
الأيقونة
☆
✓
بعد إنشاء خط الرمز الخاص بك ، يمكنك إضافة أنماط إليها لجعلها تبدو بالطريقة التي تريدها. يمكنك استخدام كس لهذا الغرض.
:
مرحبا ، هذا هو شارة بلدي!
في هذا المثال,
فئة الرموز الخاصة بي
يشير إلى خط الرمز الذي تم إنشاؤه ، والرمز
يشير إلى رمز معين من الخط.
| الآن يمكنك إضافة أنماط كس إلى الرموز الخاصة بك باستخدام فئة أو محددات. على سبيل المثال ، يمكنك تغيير حجم الرمز ولونه وموقعه عن طريق إضافة الأنماط التالية: | ||
|---|---|---|
| ||
في هذا المثال, |
فئة الرموز الخاصة بي
يشير إلى جميع الرموز مع
فئة الرموز الخاصة بي
ويطبق الأنماط المحددة لهم.
بهذه الطريقة ، يمكنك تغيير مظهر الرموز عن طريق إضافة الأنماط الخاصة بك إليها بحيث تتطابق مع تصميم موقع الويب أو التطبيق الخاص بك.
دعم رمز على مختلف الأجهزة
إذا كنت تريد التأكد من عرض الرموز الخاصة بك بشكل صحيح على أجهزة مختلفة ، فهناك العديد من الجوانب المهمة التي يجب مراعاتها:
1. اختيار المجموعة الصحيحة من الرموز
يونيكود هي مجموعة أحرف قياسية تستخدم لتمثيل لغات ورموز مختلفة ، بما في ذلك الرموز. لإنشاء الرموز ، يجب عليك استخدام أحرف يونيكود لتوفير أكبر قدر من الدعم على أجهزة مختلفة.
2. تحديد الخط الصحيح
لا يمكن تمثيل بعض الرموز إلا بخطوط معينة. حدد الخط الذي يحتوي على الأحرف المطلوبة في ترميز كس أو هتمل لصفحتك.
3. اختبار على الأجهزة والمتصفحات المختلفة
للتأكد من عرض الرموز الخاصة بك بشكل صحيح ، اختبرها على أجهزة مختلفة وفي متصفحات مختلفة. سيساعدك هذا على معرفة كيفية عرضها على أجهزة معينة ، وفي حالة حدوث مشاكل ، قم بإجراء التعديلات المناسبة.
من المهم أن تتذكر أن دعم الرمز قد يختلف من جهاز لآخر ، لذلك يوصى بالتحقق من الشاشة على الأجهزة والمتصفحات الأكثر شيوعا.