Задать вопрос
@Bearax
html

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

Здравствуйте друзья. Никак не могу понять как пользоваться с этими псевдоэлементами. Дело в том, что я установил на сайт Font Awesome с целью добавить иконки перед областями меню, но не знаю как это сделать(
  • Вопрос задан
  • 418 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
space2pacman
@space2pacman Куратор тега CSS
Просто царь.
Берешь class или id и пишешь в css class-name:before или after в зависимости где нужно поставить перед элементом или после. Внутри самого блока пишешь атрибут content. В скобках указываешь значение, которое нужно.
Например \f130 это вот такая иконка в Font Awesome
bb57d0c487c648a2b595060309da0a86.png
.class-name:before {
    content: "\f130";
}

Или просто добавлять название класса в атрибут class=""
Например
<div class="fa-microphone"/>
Ответ написан
13 комментариев
13 комментариев
Пригласить эксперта
Ответы на вопрос 3
@nollac 
.class::after {
content: "";
display: block;
width: XXpx;
height:YYpx;
background-image: url(адрес изображения);
}

если надо поставить "до" - то before. или сделать еще один блок с нужными размерами и добавить ему класс иконки FA, если они будут подключены к стр
Ответ написан
Комментировать
Комментировать
Uwe_Boll
@Uwe_Boll
Я Злой и Страшный Уве Болл в Разработке знаю Толк
Все очень просто 
<i class="fa fa-window-close" aria-hidden="true"></i>
<button type="button" fa fa-ban" aria-hidden="true">нажми</button>

а если с английским не в ладах читай
Ответ написан
Комментировать
Комментировать
@Artem-V
Я бы сделал так:
https://jsfiddle.net/jjq4f9jj/1/

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Исправление ошибок в работе вебсайта / Доработка интернет-магазина
24 апр. 2024, в 02:51
50000 руб./за проект
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Ещё заказы