استخدام الرموز التعبيرية بدلاً من الأيقونات في لافتة رابط الترحيب

مطور
1

السؤال: هل ألوان اللافتة افتراضيًا تحترم ألوان السمة، على سبيل المثال، إذا كان المنتدى في الوضع المظلم؟

أيضًا، طلبان للميزات:

  • سيكون من الرائع أن نتمكن من تغيير المحاذاة لتكون محاذاة إلى اليسار بدلاً من التوسيط (على الرغم من أنني أتخيل أن هذا بسيط باستخدام css)
  • أود أن أتمكن من استخدام الرموز التعبيرية بدلاً من أيقونات Font Awesome
إعجابَين (2)
2

من تجربتي، نعم: انظر لقطات الشاشة الخاصة بي هنا: Third migration, once again for a niche forum (Volkswagen Campers vans)

قليل من الحيل… ولكن يمكنك القيام بذلك باستخدام CSS فقط:

.featured-todo div {
    h3 {
        background: no-repeat top center;
        background-size: 30px 30px; // emoji width and height
        padding-top: 45px; // emoji height + 15 px margin down
        svg {
            display: none !important;
        }
    }
    
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1088×300 21.5 KB

عن أي جزء تتحدث؟

4 إعجابات
3

شكراً لمساعدتك @Canapin

الروابط الثلاثة وأيقوناتها، أود أن يكون النص والأيقونات محاذية لليسار بدلاً من توسيطها، على كل من سطح المكتب والجوال. لدي معرفة أساسية بـ css/html ولم أتمكن من معرفة كيفية تغييرها باستخدام أدوات المطور.

إعجاب واحد (1)
4

مع الأيقونات:

.featured-todo div h3 {
    display: flex;
    align-items: center;
    svg {
        margin: 0 10px 0 0 !important;
    }
}

image
image1304×356 21.1 KB

مع الرموز التعبيرية:

.featured-todo div {
    h3 {        
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // emoji width and height
        padding-left: 45px; // emoji width + 15 px margin left
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1293×368 24.6 KB

ملاحظة: لم أختبر أيًا من هذه التخصيصات على الهاتف المحمول.

4 إعجابات
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.