От текста к иконке

Поддержка
1

Как я могу заменить текст со скриншота на любой другой SVG-иконку, используя только CSS?

Screenshot 2025-01-06 181016
Screenshot 2025-01-06 181016574×413 22.7 KB

Большое спасибо! :stuck_out_tongue_closed_eyes:

2

Сначала вам нужно загрузить ваш SVG-файл в разделе «Загрузки». Для имени переменной SCSS используйте что-то короткое и лаконичное. Затем добавьте этот фрагмент во вкладку «Общие»:

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

Обратите внимание, что внутри скобок url не следует использовать кавычки.

3

Дон создал вспомогательный инструмент для использования иконок в CSS:

4

Извините, я не понимаю. Что вы имеете в виду под $name-of-variable? Я пытаюсь добавить SVG-код после content:, но это не работает. :ok_man:

5

Большое спасибо, @Canapin, но я не планирую устанавливать дополнительные компоненты только для того, чтобы заменить слово «replies» на SVG-код. :smiley:

6

Имя переменной — это то, которое вы указали при загрузке SVG-файла.

:warning: Для этого вам нужны права администратора.

  1. Перейдите на /admin на форуме.
  2. В боковой панели выберите «Компоненты» в разделе «Настройки» и создайте новый.
  3. Загрузите SVG-файл в разделе «Загрузки» в нижней части страницы компонента.
  4. Укажите имя для переменной (в модальном окне загрузки файла).
  5. Используйте код из моего сообщения:
  1. Замените name-of-variable на имя, выбранное вами на шаге 4. Сохраните символ $ перед именем переменной.
  2. Всё готово!
7

Большое спасибо, теперь всё очень понятно.

Вопрос на скорую руку: если у меня, скажем, 10 иконок, нужно ли загружать их по одной?

8

Да, я считаю, что так и есть.

9

@Radu Если моя инструкция не сработает, вы можете воспользоваться этой, где, как я полагаю, достаточно загрузить один файл для нескольких иконок:

10

Отличный пост, он помог мне заменить иконки по умолчанию. Еще один вопрос, если можно…

В следующем примере, как можно вставить иконку Font Awesome внутрь content?

th.topic-list-data.posts.num > span {
    visibility: hidden;
}

th.topic-list-data.posts.num > span:after {
    content: 'иконка Font Awesome здесь';
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}
11

Вы можете скачать его в формате SVG и сделать то же самое. В противном случае вам придётся создать компонент, что будет сложнее.

12

Значит, нет способа сделать что-то вроде этого?

content:'fa d-icon d-icon-reply';

Если нет, как бы выглядел код для следующего метода? Мне нужен просто пример, с чего начать, так как я пробовал обычный CSS, но это не дало эффекта.

Буду очень признателен!

13

Нет, но вы можете использовать тот же метод, что и с предыдущими методами. Загрузите его, затем добавьте как файл SVG, следуя руководству:

14

Я не совсем уверен, куда вы хотите поместить иконку. Не могли бы вы отправить скриншот?
Спасибо.

15

Неважно где, я просто хочу вставить иконку FA внутрь строки content:'...'

Думаю, я выберу FA в качестве семейства шрифтов и использую Unicode-символы внутри метода content.

16

Вы можете сделать так:

Я не на 100% уверен, что это сработает, но я довольно уверен, что это так.