عند كتابة الصفحات الأمامية ، نستخدم غالبًا بعض الصور مثل الرموز الصغيرة. إذا كنت تستخدم الصورة ، فإن الرمز أكثر إزعاجًا. في الآونة الأخيرة ، وجدت طريقة مريحة وعملية ، فقط استخدمها مباشرة.1. إدخال طرق تشغيل الصورة
أولاً ، ندخل عنوان URL: https://www.iconfont.cn/
إذا لم تتمكن من تذكر موقع الويب هذا ، فيمكنك البحث على ناقلات Baidu: Alibaba ، وسيظهر هذا الموقع ؛
فيما يلي طريقتان أكثر شيوعًا ومريحة.
الطريقة 1: مرجع من فئة الخطالخطوة 1: أدخل موقع الويب ويمكننا رؤية مربع بحث ، أو أدخل اسم الرمز الذي تريده مباشرة ، أو يمكنك العثور عليه في مكتبة الأيقونة.
الخطوة 2: ثم أضف إلى عربة التسوق.
الخطوة 3: انقر على عربة التسوق لإنشاء مشروع جديد وتأكد من أنه إذا كنت ترغب في إضافة صورة إلى نفس المشروع ، فلن تحتاج إلى إعادة إنشائها مرة أخرى.
الخطوة 4: التالي ، ستظهر الصفحة التالية ، انسخ الرمز ويرجع مستند الرمز.
<Link Rel = STYLESHEET HREF = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js>
الخطوة 5: عند تقديم الرمز ، تذكر إضافة HTTP:
الخطوة 6: حدد الرمز المقابل واحصل على اسم الفصل لنسخه ولصقه ، واستخدم no-referrer src =/img/bvbb5hz/view src = https: //cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg table = image.jpg>
<Body> <i class/= iconfont icon-xxx> </i> </body>الطريقة 2: مرجع الرمز
الخطوة 1: إذا أراد المشروع استخدام أيقونات متعددة ، فيمكنك أيضًا تحديد الرموز التي تريد استخدامها وإضافتها إلى عربة التسوق ، ثم انقر فوق تحديث الرمز ، ثم تحديث اتصال مرجع الرمز. يجب تنزيل هذه الطريقة محليًا.
الخطوة 2: بعد التنزيل ، يمكنك رؤية بعض الملفات في المجلد وتقديم ملفات JS على صفحة التعليمات البرمجية.
<link rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj51.js> <script src = iconfont.js> </script>
الخطوة 3: ضع حزمة الملف في نفس الدليل ، بحيث يمكن أن تصبح الإشارة إلى الرمز مفعولًا.
الخطوة 4: إلى نفس الطريقة ، نحتاج إلى الرجوع إلى اسم الصورة أسفل الرمز ، ونسخ ولصق اسم الصورة في SVG ، واستبدال HREF = تغيير الاسم.
<svg class = icon aria-hidden = true> <استخدم xlink: href =#icon-079aiqing> </usear> </svg>
الخطوة 5: بالإضافة إلى تقديم عناوين الملف أعلاه على صفحة الكود ، نحتاج أيضًا إلى تقديم قطعة من رمز النمط.
<style> .icon {width: 1em ؛ الارتفاع: 1EM ؛ align العمودي: -0.15em ؛ ملء: CurrentColor ؛ الفائض: مخفي. } </style>فيما يلي جميع الرموز للرجوع إليها
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = width device ، inial-scale = 1.0> href = http: //at.alicdn.com/t/font_1587841_2580lrwj51.js> <script src = iconfont.js> </script> </head> <style> .icon {width: 1em ؛ الارتفاع: 1EM ؛ align العمودي: -0.15em ؛ ملء: CurrentColor ؛ الفائض: مخفي. } </style> <body> <type type = text placeholder = search> <svg class = icon aria-hidden = true> <use xlink: href =#icon-079aiqing> </usefrتأثير الكود:
تلخيص:يمكن استخدام الطريقة الأولى مباشرة من خلال تقديمها ، وهي سريعة ومريحة ، ولا تتطلب التنزيل ، وهو أكثر ملاءمة للاستخدام. لا يمكن استخدام العيوب إلا بمفردها ولا تدعم اللون.
تدعم الطريقة الثانية صورًا متعددة وألوان متعددة ، وسيكون تأثير إدخال صور متعددة أفضل. يجب تنزيل العيوب على حزمة الملفات المحلية ويجب وضعها في نفس الدليل قبل الاستخدام.
بشكل عام ، تعد رسومات ناقلات Alibaba مفيدة للغاية للمطورين الأماميين وهي حرة في الاستخدام. يمكنك استخدام الطرق المذكورة أعلاه وفقًا لاحتياجاتك.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.