Как правильно пользоваться псевдоэлементами?

Question

[Bearax]

Здравствуйте друзья. Никак не могу понять как пользоваться с этими псевдоэлементами. Дело в том, что я установил на сайт Font Awesome с целью добавить иконки перед областями меню, но не знаю как это сделать(

Answer 1

[Ярослав Иванов]

Берешь class или id и пишешь в css class-name:before или after в зависимости где нужно поставить перед элементом или после. Внутри самого блока пишешь атрибут content. В скобках указываешь значение, которое нужно.
Например \f130 это вот такая иконка в Font Awesome

.class-name:before {
    content: "\f130";
}

Или просто добавлять название класса в атрибут class=""
Например
<div class="fa-microphone"/>

Comments

[Ярослав Иванов]

Отметь решением если подошло :)

[Bearax]

Спасибо всем за советы) Как добавить эти символы к меню? Знаю есть плагин Menu Icons, но я не хочу засорять сайт, просто хочу узнать принцип работы этого плагина, чтобы сам сделал это вручную

[Ярослав Иванов]

Я же в ответе изложил как добавлять.

[Bearax]

Я понял как выставлять эти иконки, но как добавить их к меню, не могу найти каждый элемент меню по отдельности(

[Ярослав Иванов]

Ссылку на сайт.

[Bearax]

gidroblog.ru

[Ярослав Иванов]

И в чем проблема ? я вижу у "Услуги" в dashicons.min.css

.dashicons-admin-plugins:before {
content: "\f106";
}

[Bearax]

Ярослав Иванов: Дело в том, что я сделал это с помощью плагина, а мне нужно сделать это самому без плагинов, типа сделать эту работу вместо плагина.

[Ярослав Иванов]

"Я же в ответе изложил как добавлять." Если вы этого не понимаете тогда bfy.tw/8iv0

[Bearax]

Ярослав Иванов: Или я вас не понял или же вы меня, давайте так. Вот это prnt.sc/d6f7ks плагин сделал это за меня, а я хочу найти каждую из этих и вставить туда код иконки вручную , или это делается по другому? Хочу узнать где найти вот этот вод исходный код как на скрине

[Ярослав Иванов]

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

[Ярослав Иванов]

Открываете css файл, ищете классы и далее как у меня в ответе.

[Bearax]

Ярослав Иванов: Забей дружище мы никогда не поймем друг друга :) Отмечу "решением" твой ответ

Answer 2

[Nick Krogan]

.class::after {
content: "";
display: block;
width: XXpx;
height:YYpx;
background-image: url(адрес изображения);
}

если надо поставить "до" - то before. или сделать еще один блок с нужными размерами и добавить ему класс иконки FA, если они будут подключены к стр

Answer 3

[Uwe_Boll]

Все очень просто

<i class="fa fa-window-close" aria-hidden="true"></i>
<button type="button" fa fa-ban" aria-hidden="true">нажми</button>

а если с английским не в ладах читай

Answer 4

[Артём Ведищев]

Я бы сделал так:
https://jsfiddle.net/jjq4f9jj/1/

Инструкция по подключению и настройке здесь:
https://html5book.ru/shrift-awesome/