أصبح تطوير الويب أكثر إثارة للاهتمام ومتعدد الوظائف كل عام. تعد خطوط الأيقونات أحد الاتجاهات الجديدة المهمة في تصميم الويب ، مما يتيح لك استخدام الرموز والأيقونات بدلا من الصور العادية. ومع ذلك ، قبل البدء في استخدام هذه الخطوط ، تحتاج إلى توصيلها بشكل صحيح على موقعك. في هذا الدليل ، سنلقي نظرة مفصلة على عملية توصيل خط الرمز.
تتمثل الخطوة الأولى لتوصيل خط رمز في تحديد الخط المناسب لمشروعك. هناك العديد من الخطوط رمز الحرة والمدفوعة التي تقدم مجموعات مختلفة من الرموز والرموز. اختر الخط الذي يناسب التصميم والوظائف الخاصة بك.
بعد تحديد خط الرمز المطلوب ، يجب عليك تحميله على الخادم الخاص بك أو استخدام شبكة توصيل المحتوى. قم بتنزيل جميع ملفات الخطوط ، بما في ذلك .محكمة تكافؤ الفرص, .ووف,.2,.صندوق النقد الدولي, و .سفغ ، ووضعها في دليل على الخادم الخاص بك أو على خادم كدن المتاحة.
عندما تكون ملفات الخط على الخادم الخاص بك أو كندي ، الصق شفرة هتمل التالية في قسم مستند هتمل:
- اختيار خط الرمز المناسب
- تحميل رمز الخط
- إعداد الخط رمز للاستخدام
- إنشاء ملف كس
- توصيل خط رمز بصفحة ويب
- باستخدام خط رمز في كود هتمل
- تخصيص الرموز والأنماط
- سؤال وجواب
- ما هو الخط رمز ولماذا هو مطلوب?
- كيف يمكنني العثور على الخط رمز لمشروعي?
- كيف يمكنني توصيل الخط رمز إلى موقع على شبكة الانترنت?
- هل من الممكن تغيير لون وحجم الرموز من الخط رمز?
- ما هي مزايا استخدام الخطوط رمز?
اختيار خط الرمز المناسب
خطوط الرموز هي مجموعة من الرموز الرسومية التي يمكن استخدامها لإضافة رموز إلى صفحة ويب. إنها طريقة ملائمة لتحديد العناصر والوظائف المختلفة على الموقع بصريا ، بالإضافة إلى زيادة إمكانية وصول المستخدم إليها.
عند اختيار خط رمز مناسب ، يجب مراعاة العوامل التالية:
- موضوع الموقع: يجب أن تكون خطوط الأيقونات مناسبة لسياق وأسلوب موقعك. على سبيل المثال ، إذا كنت تقوم بإنشاء موقع ويب للأطفال ، فيمكنك اختيار خط رمز به أيقونات زاهية وملونة.
- تنوع الأيقونات: يجب أن يوفر خط الأيقونات عددا كافيا من الرموز المختلفة بحيث يمكنك اختيار الرموز التي تناسب احتياجاتك على أفضل وجه. تحتوي بعض خطوط الرموز على آلاف الرموز ، مما يسمح لك بتغطية مجموعة واسعة من الموضوعات والمهام.
- التوافق عبر المتصفح: تحقق مما إذا كان خط الرمز المحدد مدعوما من قبل جميع المتصفحات الرئيسية بحيث يتم عرض الرموز بشكل صحيح على أي جهاز أو نظام أساسي.
- سهولة الاستخدام: اختيار الخط رمز التي هي سهلة للاتصال والاستخدام على موقع الويب الخاص بك. يمكن أن يكون ذلك من خلال توصيل ملف كس خارجي أو استخدام فئات مدمجة للرموز.
لمقارنة واختيار خط الرمز الأنسب ، يمكنك استخدام الموارد عبر الإنترنت التي توفر الفرصة لعرض الخطوط المختلفة ومقارنتها. من المفيد أيضا الانتباه إلى مراجعات المستخدمين وتقييمات جودة كل خط.
تعد خطوط الرموز طريقة رائعة لإضافة عناصر مرئية إلى موقع الويب الخاص بك ، مما يسهل التواصل مع المستخدمين وتحسين تفاعلهم مع المحتوى. باختيار خط الرمز المناسب ، يمكنك جعل موقعك أكثر تشويقا وجاذبية.
تحميل رمز الخط
لاستخدام خط الرمز على موقع الويب الخاص بك ، يجب عليك أولا تنزيله.
1. انتقل إلى الموقع الرسمي الذي يوفر خطوط الرموز.
2. ابحث عن الخط الذي تريده وابحث عن زر "تنزيل" أو زر آخر مشابه.
3. انقر على زر" تنزيل " وانتظر حتى ينتهي تنزيل ملف خط الرمز.
4. بعد اكتمال التنزيل ، افتح أرشيف الملف الذي تم تنزيله.
5. استخراج رمز ملفات الخط من الأرشيف إلى موقع مناسب على جهاز الكمبيوتر الخاص بك.
الآن لديك رمز الخط الذي تم تنزيله وأنت جاهز للخطوة التالية-توصيله واستخدامه على موقعك.
إعداد الخط رمز للاستخدام
لاستخدام خط رمز على موقع ويب ، تحتاج إلى اتباع عدة خطوات:
- اختر خط الرمز المناسب.
- تحميل ملفات الخط.
- قم بتوصيل الخط بصفحة الويب.
- استخدم الرموز من الخط على الموقع.
الخطوة 1: حدد خط الرمز المناسب.
قبل البدء في استخدام خط رمز ، تحتاج إلى اختيار الخط المناسب لمشروعك. بمساعدة خطوط الرموز ، يمكنك إضافة رموز مختلفة إلى الموقع ، مما سيؤدي إلى تحسين واجهة المستخدم وتبسيط التنقل في الموقع.
الخطوة 2: تنزيل ملفات الخطوط.
بعد تحديد الخط المناسب ، تحتاج إلى تنزيل ملفات الخطوط. اعتمادا على الخط الذي تختاره ، قد يكون ملفا واحدا بامتداد.صندوق النقد الدولي, .أوتف, .ووف ، أو مجموعة من الملفات مع ملحقات مختلفة.
الخطوة 3: قم بتوصيل خط الرمز بصفحة الويب.
لتوصيل خط رمز بصفحة ويب ، تحتاج إلى إضافة الرمز إلى ملف النمط أو إلى كتلة النمط على صفحة الويب. مثال على الكود:
@الخط الوجه {
عائلة الخط:'اسم مقتصد';
اسم الملف.ملحق') تنسيق ('تنسيق الملف');
}
الخطوة 4: استخدام الرموز من الخط على الموقع.
بعد توصيل الخط ، يمكنك البدء في استخدام الرموز منه على صفحة الويب. للقيام بذلك ، أضف علامات مع فئات الرموز إلى شفرة هتمل للصفحة ، على سبيل المثال:
جاهز! الآن سيتم عرض خط الرمز على موقع الويب الخاص بك وستتمكن من استخدام أيقوناته.
إنشاء ملف كس
لتوصيل خط الرمز على الموقع ، تحتاج إلى إنشاء ملف كس منفصل. في هذا الملف ، سنحدد أنماطا لكل رمز ونحدد الفئات التي سيتم تطبيقها على العناصر المقابلة على الموقع.
هنا مثال على ملف كس بسيط لتوصيل خط رمز:
@الخط الوجه {
الخط الأسرة: 'رمز الخط';
سرك: ورل('مسار/إلى/رمز الخط.تف') شكل ('تروتايب');
}
.رمز {
عرض: مضمنة كتلة;
الخط الأسرة: 'رمز الخط';
حجم الخط: 16 بكسل;
نمط الخط: عادي;
زخرفة النص: وراثة;
تحويل النص: لا شيء;
خط الارتفاع: 1;
-بكت-الخط تجانس: أنتيالياسد;
-موز-أوسك-الخط-تجانس: الرمادي;
}
.أيقونة-الصفحة الرئيسية: قبل {
المحتوى: '\ إي 800';
}
.رمز-البحث: قبل {
المحتوى: '\ إي 801';
}
.رمز المغلف: قبل {
المحتوى: '\ إي 802';
}
/* Добавьте остальные стили для ваших иконок */
في هذا المثال ، ونحن إنشاء خط اسمه رمز الخط ، حدد المسار إلى ملف الخط رمز (عادة هذا .صندوق النقد الدولي أو .ملف وف) ، ومن ثم تحديد الطبقة.أيقونة لجميع العناصر التي نريد تطبيق أنماط الرموز عليها.
بعد ذلك ، نحدد فئات لكل رمز (على سبيل المثال،.أيقونة-الصفحة الرئيسية,.أيقونة-بحث, .رمز المغلف) وتحديد رموز الأحرف رمز لخاصية المحتوى. رموز الأحرف يمكن العثور عليها في وثائق أو رمز ملفات الخط.
بعد إنشاء ملف كس مع الأنماط اللازمة ورموز الأحرف ، تحتاج إلى توصيله إلى مستند هتمل الخاص بك باستخدام العلامة في القسم:
الآن سيكون خط الرمز متاحا على موقعك ، ويمكنك تطبيق الأنماط على العناصر باستخدام الفئات المحددة في ملف كس.
توصيل خط رمز بصفحة ويب
خطوط الأيقونات هي مجموعة من الرموز المعروضة بتنسيق خط. إنها تسمح لك باستخدام الرموز كرموز نصية وتوسيع نطاقها دون فقدان الجودة. لتوصيل خط رمز بصفحة ويب ، اتبع الخطوات التالية:
- ابحث عن خط الرمز المطلوب. هناك العديد من الخطوط رمز الحرة والتجارية المتاحة للتحميل.
- تحميل ملفات الخط إلى الخادم الخاص بك. تتضمن ملفات الخطوط عادة ملفات خطوط بتنسيقات مختلفة (.ووف,.صندوق النقد الدولي, .محكمة تكافؤ الفرص, .سفغ) وملفات النمط (.المغلق) التي تحدد فئات الرموز والأنماط.
- إنشاء أنماط لاستخدام الرموز على صفحة ويب. في ملف النمط (.كس) تحتاج إلى تحديد محددات لكل رمز وتحديد خاصية عائلة الخط المطلوبة لاستخدام خط الرمز.
- قم بتوصيل ملف نمط (.المغلق) إلى صفحة ويب. يمكن القيام بذلك باستخدام الرابط أو علامة استيراد @داخل علامة النمط.
- استخدم فئات الرموز في ترميز هتمل. من أجل استخدام رمز ، تحتاج إلى إضافة الفئات المحددة في ملف النمط إلى عناصر هتمل أو إنشاء عناصر منفصلة لكل رمز.
من المهم ملاحظة أنه عند استخدام خطوط الرموز ، يجب مراعاة إمكانية الوصول وقابلية التوسع. يوصى بإضافة وصف نصي للرمز باستخدام تسمية الأغنية أو السمات المخفية للأغنية بحيث يمكن للمستخدمين ضعاف البصر أو برامج القراءة تفسير الرمز بشكل صحيح.
باستخدام خط رمز في كود هتمل
خطوط الأيقونات هي خطوط خاصة يتم فيها استبدال كل حرف أو رمز برمز. تستخدم هذه الخطوط على نطاق واسع في تصميم الويب لإنشاء عناصر الواجهة والرموز والعناصر الرسومية الأخرى.
لاستخدام خط رمز في رمز هتمل ، يجب عليك أولا توصيله بالصفحة. للقيام بذلك ، يمكنك استخدام رمز خاص يتم إدراجه في قسم الرأس في مستند هتمل.
على سبيل المثال ، ضع في اعتبارك توصيل الرمز الخط "الخط رائع".
- الخطوة 1: قم بتنزيل ملفات خط الرمز الضرورية من موقع الخط الرسمي الرائع.
- الخطوة 2: قم بفك ضغط الأرشيف الذي تم تنزيله وانسخ المجلد الذي يحتوي على الرمز ملفات الخط إلى مشروعك.
- الخطوة 3: الصق الكود التالي في قسم الرأس في مستند هتمل:
هنا ، تحدد السمة هريف المسار إلى رمز ملف نمط الخط (عادة ملف مع .تمديد المغلق).
بعد توصيل خط الرمز ، يمكنك استخدام أيقوناته باستخدام علامة أنا أو سبان والفئة المحددة في رمز كس للرمز المقابل.
على سبيل المثال ، لإدراج رمز "القلب" من "الخط ممتاز" رمز الخط ، استخدم التعليمات البرمجية التالية:
هنا يتم تعيين فئة " فا "لجميع الرموز من" الخط رهيبة "رمز الخط, و" فا القلب "نقاط الطبقة إلى رمز" القلب " محددة.
وبالتالي ، يمكنك استخدام رموز مختلفة في كود هتمل من خلال تطبيق الفئات المناسبة لكل رمز من خط الرمز المتصل.
تخصيص الرموز والأنماط
بعد توصيل خط الرمز بموقعك ، قد تحتاج إلى إعداد أنماط مختلفة للرموز. في هذا القسم ، سنلقي نظرة على الطرق الرئيسية لتخصيص الرموز والأنماط.
. ما عليك سوى تطبيق حجم البكسل المطلوب على العنصر الذي يحتوي على الرمز.
. فقط قم بتطبيق اللون المطلوب على العنصر الذي يحتوي على الرمز.
3. استخدام رموز محددة: تقدم بعض خطوط الرموز أنماطا خاصة لبعض الرموز. لاستخدام هذه الأنماط ، قم بتعيين الفئة المناسبة للعنصر الذي يحتوي على الرمز. على سبيل المثال ، لاستخدام رمز "عربة التسوق" من فونتاوسوم ، يمكنك تعيين فئة "فا فا التسوق سلة" إلى العنصر.
. على سبيل المثال ، إذا كنت ترغب في تغيير لون الرمز عند التمرير ، يمكنك إضافة رمز كس التالي:
.رمز: تحوم {
اللون: # فف0000;
}
5. تغيير أنماط الرموز باستخدام جافا سكريبت: إذا كنت تريد تغيير أنماط الرموز ديناميكيا ، فيمكنك استخدام جافا سكريبت. على سبيل المثال ، يمكنك تغيير حجم الرمز أو إضافة رسوم متحركة لحدث معين.
6. إنشاء الرموز الخاصة بك: إذا لم يكن لديك رمز مناسب في خط الرمز ، فيمكنك إنشاء الرمز الخاص بك. للقيام بذلك ، قم بإنشاء عنصر وإضافة الأنماط المطلوبة واستخدام رمز أو صورة خاصة كمحتوى للعنصر.
من المهم أن تتذكر أنه عند إعداد الرموز والأنماط ، يوصى باتباع مبادئ التصميم الجيد. استخدم نمطا يطابق النمط المرئي العام لموقعك ويوفر تباينا وقابلية استخدام كافية.
سؤال وجواب
ما هو الخط رمز ولماذا هو مطلوب?
خط الرمز عبارة عن مجموعة من الأحرف التي يتم عرضها كرموز وليست أحرفا. يتم استخدامها لإضافة رموز إلى موقع ويب أو تطبيق ويب. يؤدي استخدام خطوط الرموز إلى تبسيط عملية إضافة الرموز ، حيث يمكن تغيير حجمها وتحجيمها وتصميمها باستخدام كس.
كيف يمكنني العثور على الخط رمز لمشروعي?
هناك العديد من الخطوط رمز الحرة والمدفوعة التي يمكن استخدامها في مشروع ويب. للعثور على خط رمز مناسب ، يمكنك الرجوع إلى مكتبات خطوط الرموز عبر الإنترنت مثل فونتاوسوم أو أيقونات تصميم المواد أو الرموز الرسومية. ستجد في هذه المكتبات العديد من الرموز ذات السمات المختلفة.
كيف يمكنني توصيل الخط رمز إلى موقع على شبكة الانترنت?
لتوصيل خط رمز بموقع ويب ، يجب عليك أولا تنزيل ملفات الخطوط من مكتبة خطوط الرموز المحددة. بعد ذلك ، يمكنك إضافة هذه الملفات إلى الخادم الخاص بك أو استخدام كندي لتخزين ملفات الخطوط. بعد ذلك ، تحتاج إلى توصيل ملفات الخط إلى مستند هتمل الخاص بك باستخدام العلامة أو @استيراد في ملف كس. أيضا ، تحتاج إلى إضافة فئات كس لكل رمز لاستخدامها على موقع الويب الخاص بك.
هل من الممكن تغيير لون وحجم الرموز من الخط رمز?
نعم ، تجعل خطوط الرموز من السهل تغيير لون الرموز وحجمها وحتى تصميمها. يمكنك استخدام كس لتغيير لون وحجم الرموز باستخدام خصائص اللون وحجم الخط. بالإضافة إلى ذلك ، يمكنك أيضا إضافة تأثيرات وأنماط مختلفة إلى الرموز باستخدام كس.
ما هي مزايا استخدام الخطوط رمز?
استخدام خطوط الرموز له العديد من المزايا. أولا ، أنها توفر المرونة وسهولة الاستخدام ، والرموز يمكن تحجيمها بسهولة ونصب باستخدام المغلق. ثانيا ، يساعد استخدام خطوط الرموز على تحسين أداء موقع الويب ، لأنها تتطلب تحميل بيانات أقل مقارنة باستخدام الصور الفردية. بالإضافة إلى ذلك ، تضمن خطوط الرموز أيضا مظهرا موحدا للرموز في جميع أنحاء الموقع.