Как при вёрстке добавляют иконки SVG?

Question

[Jedi]

Как при грамотной и правильной верстке, соблюдая "лучшие практики", добавляют иконку справа в элементы?

В моем случае, я хочу добавить иконки на li элементы. Иконки у меня в формате SVG.
На данный момент я внутри li разделил пространство на col-2 и col-10. В первой иконка в виде div, которому в свойствах фонового изображение указать путь к SVG файлам. Также указаны свойства для выравнивание изображение по центру.

Мне кажется, что это не очень хороший подход, и возможно, не всё ровно по линейному.

Расскажите, пожалуйста, как это сделать грамотно и правильно?
Заранее спасибо!

Comments

[Антон Литвиненко]

Вообще делить Li с помощью сетки бутстрапа корявое решение. Сетка хорошо подходит для крупных блоков, а уж Li можно и ручками поделить

[Jedi]

Антон Литвиненко, Спасибо!

Answer 1

[Виктор Путин]

Здесь думаю ты найдешь нужный тебе вариант

Comments

[Jedi]

Спасибо!

Answer 2

[Олег]

pseudo

Comments

[Jedi]

что?

[Олег]

Jedi, Такое ощущение, что дети предыдущих, с гор спустились и с аулов повылазили.
Загуглить, не говоря о том, что это элементарный css и нужно знать, вера не позволяет
Псевдоэлементы гугли

[Виктор Путин]

Jedi, https://webref.ru/css/before
https://webref.ru/css/after

[Jedi]

Олег, Братель, не знаешь ответа - не отвечай. Нахер ты это делаешь, тебя что, омон измучил?... пингуй отсюда

[Олег]

Jedi, за тебя может еще сделать?
Я тебе вполне обоснованно ответил.

[Jedi]

Олег, Я хочу узнать, каким подходом лучше всего подойти к данной задаче. В чем проблема ответить на вопрос?

[Олег]

Jedi, узнаешь больше, когда хоть удосужишься сам найти, что такое псевдоэлементы в css и как применить для конкретно твоей задачи.
Пример в пару строк не вижу смысла скидывать тому, кто понятия не имеет о чем идет речь

[Jedi]

Олег, я про них отлично знаю, Олег. У меня не очень большой опыт в верстке, Зашел спросить, что и как лучше.

[Олег]

Jedi, )) Опыт......
Я ответил сразу и по делу о псевдо, ты спросил "что" и где опыт если не знаешь о псевдоэлементах?
Ладно. Не дай бог заказчикам такого опытного специалиста рекомендовать ;)

[Jedi]

Олег, Возможно на английском не помню слово pseudo, но это мои проблемы. По поводу заказчиков, братишка, они тебе нужны, я для себя пишу.

Answer 3

[Алекс Глебов]

Если иконки разные, то img.
Одинаковые через спрайт или фон.

Comments

[Jedi]

Алекс, иконки для каждого элемента списка настроек пользователя. Тот метод, который я реализовал, я так понимаю, что неправилен?

Какой подход будет правильным для данной задачи?

[historydev]

Jedi, fontawesome

[Jedi]

Владимир, Да не, у меня нарисованные иконки, свои имею ввиду.

[historydev]

Jedi,

за тебя может еще сделать?
Я тебе вполне обоснованно ответил.

:after :before юзают для замены точек на свои символы/картинки (в случае li это минимальный их функционал), тебе ответили, если ты не это имел ввиду, то твой вопрос построен неверно, попробуй ещё. "Подход" какой-то, здесь один подход, ты либо фонишь картинки спискам, либо присваиваешь их псевдо-элементами

[Jedi]

Владимир, Понятно. Спасибо за ответ! Но причем здесь:

за тебя может еще сделать?
Я тебе вполне обоснованно ответил.