Использование эмодзи вместо иконок в баннере приветственной ссылки

Разработка
1

Вопрос: По умолчанию цвета баннеров соответствуют цветам темы? Например, если форум в темном режиме.

Также два предложения по улучшению:

  • Было бы здорово иметь возможность изменить выравнивание на левое вместо центрального (хотя, полагаю, это легко реализовать через CSS).
  • Мне бы очень хотелось иметь возможность использовать эмодзи вместо иконок Font Awesome.
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; // ширина и высота эмодзи
        padding-top: 45px; // высота эмодзи + 15 пикселей отступа снизу
        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

О какой части вы говорите?

3

Спасибо за вашу помощь, @Canapin

Речь о трёх ссылках и их иконках. Я хотел бы, чтобы текст и иконки были выровнены по левому краю, а не по центру, как на компьютере, так и на мобильных устройствах. У меня есть базовые знания CSS/HTML, но я не смог понять, как изменить это с помощью инструментов разработчика.

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; // ширина и высота эмодзи
        padding-left: 45px; // ширина эмодзи + 15 пикселей отступа слева
        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

Примечание: Я не тестировал эти настройки на мобильных устройствах.