2

Как добавить иконку с помощью :before?

.basket::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: red;
}
<nav>
  <ul class="main-navigation">
    <li><a href="#">Студия</a></li>
    <li><a href="#">Клиенты</a></li>
    <li><a href="#">Магазин</a></li>
    <li><a href="#">Контакты</a></li>
    <li class="basket"><a href="#">Корзина</a></li>
  </ul>
</nav>

У меня вылетает блок before за границу li, и его просто не видно.

2
  • В примере не вылезает
    – user212578
    Commented 12 янв. 2020 в 14:51
  • нет, эту иконку нужно сделать слева от текста!
    – fyntyaa
    Commented 12 янв. 2020 в 15:15

4 ответа 4

4

Вот как вариант:

.basket::before {
  content: "";
  position: relative;
  float: left;
  margin: 2px 5px 0 0;
  width: 15px;
  height: 15px;
  background-color: red;
}

.main-navigation {
  line-height: 20px;
}
<nav>
  <ul class="main-navigation">
    <li><a href="#">Студия</a></li>
    <li><a href="#">Клиенты</a></li>
    <li><a href="#">Магазин</a></li>
    <li><a href="#">Контакты</a></li>
    <li class="basket"><a href="#">Корзина</a></li>
  </ul>
</nav>

4

По шагам

1) Берём ссылку с cdnjs.com https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

2) Открываем официальный сайт font-awesome: https://fontawesome.com/

3) Выбираем нужную иконку( я выбрал три разных )

content: "\f007"; content: "\f1ea"; content: "\f099";

КОД НА СКРИНЕ:

введите сюда описание изображения

Не забываем об обратном слеше \ она над клавишей Shift

На всякий случай : ЧаВо

Собираем всё в один html документ так :

div {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline-block;
}

.login:after {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: red;
}

.tps::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f1ea";
  color: blue;
}

.twitter::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f099";
  font-weight: 900;
  color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="login"></div>
<div class="tps"></div>
<div class="twitter"></div>

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

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

li a {
  text-decoration: none;
}

li::before {
  display: inline-block;
  width: 30px;
  text-align: center;
  filter: grayscale(100%);
}

li:first-child::before {
  content: "🔧";
}

li:nth-child(2)::before {
  content: "💡";
}

li:nth-of-type(3)::before {
  content: "🎎";
}

li:nth-of-type(4)::before {
  content: "🎵";
}

li:nth-of-type(5)::before {
  content: "📷";
}

li:hover::before {
  filter: grayscale(0);
}
<ul>
  <li><a href="">настройки</a></li>
  <li><a href="">важное</a></li>
  <li><a href="">знакомства</a></li>
  <li><a href="">музыка</a></li>
  <li><a href="">фото</a></li>
</ul>

На toster.ru был вопрос подобный но я там реализовал по чуть чуть по другому

2

Класс .basket установите на ссылку, а li задайте position: relative; и влево на -15px отодвиньте иконку с помощью left: -15px;

ul.main-navigation li{position:relative;} 

.basket::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top:0;
  left: -15px;
  background-color: red;
}
<nav>
  <ul class="main-navigation">
    <li><a href="#">Студия</a></li>
    <li><a href="#">Клиенты</a></li>
    <li><a href="#">Магазин</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#" class="basket">Корзина</a></li>
  </ul>
</nav>

Но у меня работает одинаково, если и не перемещать класс .basket с li на a. От этого будет зависить кликабельная иконка будет или нет. На ваш вкус.

1

Можно и без ::before, а для класса .baketиспользовать list-style-image: url('')

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.