Иконки на сайте, это необходимый элемент дизайна вашего сайта. Бывают случаи когда просто какое то изображение не сможет так просто преобразить или украсить ваш сайт, как это сделает простая иконка. Сама по себе иконка, может и передает какую то информацию, но было бы хорошо, если мы еще и добавляли рядом еще и текстовую информацию.
Пример стандартных элементов дизайна сайта (не важно где они разрабатываются, в конструкторе или вручную), это блок преимуществ, схема работы с клиентом, возможно даже список со значками. Все это настолько стандартно, что все привыкли видеть различные иконки на сайте. Поэтому и в конструкторе сайта, тоже имеется виджет с таким функционалом.
Виджет "Иконка с текстом" предназначена для отображения иконки, с заголовком и описанием. Макет отображения виджета может быть разный, например можно иконку разместить слева или справа, можно ее вписать в круг или квадрат, а можно вообще её повернуть на некоторый градус. Я частенько пользуюсь виджетом, что быстро сделать блок преимуществ и логотип для сайта. На момент написания статьи используется fontawesome версии 4.7. Список всех иконок можно посмотреть на офф. сайте FontAwesome 4.7
На изображении выше показан виджет с разными настройками положения, цвета и формы иконки и текста. Как вы заметили, изменить можно каждый элемент виджета, начиная от размера, до его цвета и типографики. Первый виджет, это отображение виджета по умолчанию. У данного виджета много настроек для отображения и стилевого оформления. Ниже их описание.
Содержимое
- Иконка с текстом
- Вид - вид отображения иконки, т.е обрамленная, вписанная или по умолчанию без ничего.
- Выберите иконку - в выпадающем списке можно выбрать иконку ,вручную или через поиск вводом кода иконки. Список всех иконок можно посмотреть на офф сайте FontAwesome.
- Заголовок и описание - текстовая составляющая виджета т.е заголовок и описание.
- Ссылка на - http ссылка на любой ресурс. Ссылка прикрепляется к иконки и заголовку. Описание остается нетронутым.
- Позиция иконки - расположении иконки относительно текста: лево, верх, право.
- HTML-тег заголовка - тег html для заголовка виджета. Необходимо менять при разработки семантики сайта.
Стили
- Иконка
У иконки возможно изменить стилевые свойства цвета иконки, как самой иконки, так и обрамления (или заполнения - для разного вида иконок свой стиль). Так же доступны отступы, размер иконки и угол поворота, толщина границ и ее скругление.
- Иконка при наведении
Для иконки при наведении на нее указателем мыши, доступны изменения ее цвета и установка вида анимации.
- Содержимое
Для заголовка доступны такие свойства как: отступ, цвет, типографика. А для описания возможно изменить только цвет и типографика.
Иконка с текстом — виджет Elementor: 22 комментария
Добрый день! Купил Элементор ПРО и когда делаю иконки, то можно ставить не все инконки, большинство из низ просто светиться вопросительный знак и восклицательный. Кто сталкивался с таким?
День добрый. Не сталкивался, всегда иконки отображались. Вы пробовали написать в поддержку ? Обычно без проблем помогают по версии ПРО
Приветствую. Как у иконки задать border-color?
День добрый. Только через написание стилей на вкладке Расширенные.
Например
selector .elementor-icon {border-color:#000 !important;}Спасибо.
Добрый день! Почему у меня в мобильной версии иконка только сверху контента, разве нельзя никак поставить на одном уровне с текстом?
День добрый. С помощью виджета не получится. Физически размеры не позволяют. Как выход вставить секцию и отдельно поместить иконку и отдельно текст. Тогда можно колонкам задать необходимое поведение для разных экранов.
Плохо, что не на одном уровне… Подскажите тогда как в css это сделать?
С помощью CSS в данном варианте совсем неправильно.
Воспользуйтесь советом выше или же виджетом типа Call to Action
Здравствуйте ! У меня не получается «Иконка с текстом » при наведени на текста должен активировать стили Иконку при наведении , Как решить ?
Здравствуйте. По столь короткому описанию ошибки точно не решить. Нужен пример, сайт, что сделано итд.
Добрый день. Подскажите как-то возможно выровнять иконку с текстом по центру колонки?
Здравствуйте. По умолчанию и так по середине колонки. А на вкладке Стиль, есть возможность изменить выравнивание.
У меня выравнивается слева, сюда к сожалению прикрепить не могу (((
Не знаю как объяснить, может выровнять в секции по центру. У меня иконка с текстов только слева в секции выравнивается, других возможностей не вижу в стиле.
Выложите скрин на фотохостинг какой нибудь.
У меня так. https://yadi.sk/i/BVqq0ZPsYLncFg
https://yadi.sk/i/U85Ni1ikOD7qWg
https://prnt.sc/11ok60r
Вот такая иконка с текстом по центру секции… Иконка должна быть слева, а не наверху, а все вместе выравниваться в центре секции на всю ширину. Те настройки что в элементоре не помогают. Решила вопрос стилями без иконок. Если кому пригодится выглядит вот так:
h1::before {
content: » «;
background: #373737;
width: 50px;
height: 2px;
position: relative;
left: 0;
top: -10px;
display: inline-block;
margin-right: 10px;
}
Теперь понял. Нужно было так и описывать, что иконка слева.
Используйте виджет «список с иконками» https://blog.web5x.ru/spisok-s-ikonkami-widget-elementor/
Это для первой строчки, заголовка. Для второй, текста, любой подходящий.
Спасибо. Да это один шикарных вариантов, но к сожалению нет возможности выбрать у текста H1, а надо именно H1 чтобы текст был.
Можно и перед текстом вручную добавить иконку fontawesome
https://yadi.sk/i/VqOD3R5h80TcAA
единственное что может подойти — fa-minus, но он короткий и толстый. По дизайну никак (((
Оставлю стилем как сделала.
Спасибо, что не оставили вопрос без внимания! )))
Здравствуйте, если вставил svg в иконку и выставил границу, можно заголовок вставить не снизу границы иконки, а вставить выше границы. Чтобы иконка и текст были в одной рамке?
День добрый. Нет, нельзя. Если только не виджетом, а вручную, создав секцию и обрамив ее.