Как правильно прописать :before чтобы он работал?

0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 489 Просмотров
*

tao2en

  • Осваиваюсь на форуме
  • ***
  • 71
  • 0
Добрый день!
Подскажите пожалуйста, пытаюсь применить иконку к псевдоэлементу :before, но если я прописываю
Код
<div>
<i class="uk-icon-check">
:before
</i>
</div>
то получается что после иконки идёт текст :before, то есть это просто текст, а не псевдоэлемент.
В итоге (см. вложение) я иконку привязываю к точке ".", если точку убираю, то иконка пропадает (пропадает сам тег i), что я делаю не так?
На сайтах где я видел такие иконки, код выглядит точно также как у меня (см. вложение), только без точки ".", у меня же, если убираю точку, пропадает и иконка.
« Последнее редактирование: 13.03.2017, 13:59:15 от tao2en »

*

Efanych

  • Группа развития
  • *****
  • 4317
  • 605
Цитировать
<div>
<i class="uk-icon-check">
:before
</i>
</div>
:before писать не надо. Это псевдоэлемент. Он сам появится в инспекторе браузера, когда ему стили назначите.
Про точку не понял ничего...
Создание сайтов, шаблонов, помощь в решении проблем.

*

tao2en

  • Осваиваюсь на форуме
  • ***
  • 71
  • 0
:before писать не надо. Это псевдоэлемент. Он сам появится в инспекторе браузера, когда ему стили назначите.
Про точку не понял ничего...
Точка, это символ который я поставил, чтобы к нему привязать класс с иконкой, если точку убираю, чтобы её не было перед иконкой, то пропадает тег <i> в котором через класс была прописана иконка, соотвественно и иконки нет.
Код
.uk-icon-check:before {
    content: "\f00c";
разве это не те стили?

*

Efanych

  • Группа развития
  • *****
  • 4317
  • 605
Дайте ссылку на страницу.
Создание сайтов, шаблонов, помощь в решении проблем.

*

almika

  • Давно я тут
  • ****
  • 269
  • 22
Пробел вместо точки просто поставьте:
<i class="uk-icon-check">&nbsp;</i>

*

tao2en

  • Осваиваюсь на форуме
  • ***
  • 71
  • 0
http://getuikit.ru/docs/icon.html здесь например не используют &nbsp; , но всё-равно спасибо, пусть хоть так). Вся суть проблемы что <i></i> исчезают, не сохраняются, если между ними ничего нет, хотя на других сайтах я не видел чтобы в эти теги был заключен какой-то символ.
« Последнее редактирование: 14.03.2017, 13:32:39 от tao2en »

*

almika

  • Давно я тут
  • ****
  • 269
  • 22
Просто ваш пустой тег убирает редактор. Вот тут есть объяснение как сделать так, чтобы не убирал
https://yootheme.com/support/question/67584

Найдите строки для вашего редактора (Joomla Content Editor (JCE) and TinyMCE) и сделайте как написано.

*

tao2en

  • Осваиваюсь на форуме
  • ***
  • 71
  • 0
Просто ваш пустой тег убирает редактор. Вот тут есть объяснение как сделать так, чтобы не убирал
https://yootheme.com/support/question/67584

Найдите строки для вашего редактора (Joomla Content Editor (JCE) and TinyMCE) и сделайте как написано.
Вот, теперь точно всё работает как надо, спасибо Вам огромное!