amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ span.acss93460{text-decoration:underline;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Categories: Дизайн сайта

Шрифт иконки в WordPress с помощью простого плагина

В этой статье мы рассмотрим шрифт, состоящий только из иконок. Называется он Awesome и широко используется вебидизайнерами.

Загружаются они быстро, так как это текст, а не изображение, и отображаются на любом браузере. Подключают шрифт через файл function.php. Однако если язык PHP для вас дремучий лес, как альтернатива, можно воспользоваться плагином Better Font Awesome, который позволит внедрить шрифт иконки в WordPress.

Шрифт иконки и плагин Better Font Awesome

Плагин вы можете скачать в официальном репозитории WordPress. После загрузки плагина, установите его и активируйте. После этого можно добавлять шрифт иконки на страницу или запись тремя способами: с помощью шорткодов, через текстовый редактор или непосредственно через код HTML.

Среди достоинств плагина, который позволяет установить шрифт иконки в WordPress можно выделить следующее:

Автоматическая проверка обновления версии шрифта на официальном сайте. В настройках вы можете изменить версию шрифта.
Поддержка текстовым редактором генерируемых плагином шорткодов.
Шорткод сам адаптируется под версию шрифта. Таким образом, при изменении его версии, вам не надо будет менять шорткоды на сайте.

Способы добавления шрифта иконок на сайт

Первый способ добавления иконок на сайт с помощью шорткодов. Вы просто копируете шорткод, сгенерированный плагином в требуемый участок текста и иконка будет отображаться. Вам не придется прописывать дополнительные HTML теги или использовать какие языки программирования.

Второй способ – это добавление иконок с помощью панели редактора WordPress. Здесь все просто. Наверное, вы уже догадались, что после установки и активации плагина в текстовом редакторе появится кнопка, которая позволяет выбирать, настраивать и добавлять иконки на сайт. Для добавления иконок найдите комбобокс с названием «Icons». Далее выберите нужный шрифт иконки и она автоматически добавляется в текст.

Так же, как и текст, вы можете редактировать иконки для WordPress, задавать им размер и цвет. Когда всё готово, не забудьте сохраниться, и проверьте корректность отображения текста на сайте.

Третий способ – добавление иконок с помощью HTML тегов. Вот тут-то вам и понадобятся знания HTML языка. Вот один из наиболее простых способов добавления иконок:

<em class=”fa fa-wordpress”></em> wordpress icon.

Также через HTML код можно осуществлять все те же настройки, что и в предыдущих двух способах. Подробнее о способах добавления иконок через HTML вы можете узнать на сайте fontawesome.io.

Вам также может быть полезен плагин для работы со шрифтами в WordPRess, который значительно дополняет стандартный редактор. О нём мы говорили тут.

Адель Гадельшин