محاولة استخدام CSS لإدراج أيقونات PNG في مربعات العلامات

مرحباً، أحاول استخدام مجموعة من أيقونات PNG كرموز على علامات المنتدى الخاصة بي. لقد نجحت في جعلها تتناسب مع مربع العلامة بشكل جميل، لكن هذا ينطبق على جميع مربعات العلامات. لقد وجدت كيفية استهداف علامات محددة، ولكن ما هي الطريقة الصحيحة لاختيار مربع علامة معين لإدراج أيقونة PNG فيه؟ أي مساعدة ستكون رائعة!

محاولة اختيار واحدة -

.tag-question::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

اختيار الكل -

a.discourse-tag.box::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

لماذا لا تستخدم رموز SVG بدلاً من ملفات PNG؟ هناك مكون لذلك في Tag Icons

كنتُ قد جرّبت ذلك بالفعل، لكن بما أنني أعمل على هذا الأمر، سأحتاج إلى تحويل أكثر من 400 أيقونة بصيغة PNG إلى SVG، ثم تجميعها جميعًا في ملف SVG Sprite. وبناءً على ما جربته وما قرأته، لا توجد طريقة سريعة أو فعالة لتحويلها مع الحفاظ على جودة أيقونات PNG الأصلية. لقد جرّبت تحويل أيقونة واحدة عدة مرات، لكن الجودة عادةً ما تنخفض، وعندما حاولت إدراجها في Sprite لم أتمكن من تحميلها مع مكون الثيم.

يمكنك استخدام محدد السمات في CSS

إليك مثال مع علامة السؤال:

a.discourse-tag.box[href*="question"]::before {

مع 400 علامة، قد تحتاج إلى استخدام شيء آخر غير [href*= لبعض العناصر. هناك بضع بدائل لتحديد عنصر السمة.

آه، شكرًا لك! :grinning: هذا يجب أن يعمل بشكل رائع مع ما أحاول القيام به.