Использование Font Awesome с WordPress

Псевдоэлемент Плюсы

• Вы можете быть очень конкретными со своими проектами; Вы устанавливаете размеры, высоту линии, цвета и стили, которые вам нужны
• Вам не нужно использовать дополнительный элемент HTML просто для создания иконки (вы можете применить это непосредственно к другому элементу, например, H1 или div, а затем расположить его вокруг элемента)

Cons

• Нужно настроить все вручную (вы не можете просто использовать предопределенный класс Font Awesome, чтобы сделать все больше или повернуть, или другие изменения)
• Сложно целиться с помощью JavaScript / jQuery (так как вы используете метод CSS для элемента, если вы хотите нацелиться на элемент и изменить иконку / своп, это сделать невозможно; это потому, что вы не можете нацеливать псевдоэлементы)
• Если Font Awesome обновляет их ссылки на Unicode и вы обновляете таблицу стилей, вам может потребоваться повторно ввести значения Unicode)

Встроенный элемент (метод HTML)

Самый простой способ использовать Font Awesome — это присвоить классы Font Awesome элементу.

Когда вы используете иконку шрифта таким образом, он генерирует псевдоэлемент до / после целевого элемента и создает стиль для иконки.

Если вы хотите отобразить значок, вам нужно назначить класс faispan Этот класс соединяет ваш элемент со шрифтом Font Awesome.

Как только ваш элемент имеет базовый класс fa Например, если вы хотите отобразить значок камеры, вы также добавите класс fa-camera-retro Выбор этого соответствующего класса значков приведет к поиску шрифта значка и отображению его символа юникода (его глифа).

 <!--outputs a camera icon-->
<i class="fa fa-camera-retro"></i>

Что бы сделать что-то вроде этого:

Как только у вас появится рендеринг значков, вы сможете создавать более красивые элементы, используя дополнительные классы Font Awesome для применения размеров, поворотов, цветов и стилей.

Пример меню навигации

Вы можете создать простое навигационное меню, используя предопределенные классы и стили Font Awesome:

 <!-- CSS for the menu -->
/*Base styles for a drop down*/
.nav-list .nav-item{
	display: block;
}
.nav-item .nav-link:first-child{
	border-top: solid 1px #ccc;
}
.nav-item .nav-link{
	display: block;
	padding: 8px 12px;
	background: #eee;
	border: solid 1px #ccc;
	border-top: 0px;
	color: #333;
}
.nav-link > i {
	margin-right: 10px;
}

 <!--HTML for the menu -->
<nav class="menu">
	<div class="nav-list">
		<li class="nav-item">
			<a href="/" class="nav-link">
				<i class="fa fa-home fa-fw"></i>
				<span>Homepage</span>
			</a>
			<a href="/users" class="nav-link">
				<i class="fa fa-user fa-fw"></i>
				<span>Our Users</span>
			</a>
			<a href="/tags" class="nav-link">
				<i class="fa fa-tag fa-fw"></i>
				<span>View Tags</span>
			</a>
		</li>
	</ul>
</nav>

Это создаст простое вертикальное меню навигации, как показано ниже:

Пример Stacking Icons

Вы также можете сложить иконки вместе, чтобы создать разные взгляды. В качестве примера, вот несколько кнопок социальных сетей:

 <!--Basic CSS styling -->
.social-bar {
	text-align: center;
}
.social-bar .header{
	display: inline-block;
	margin: 0px 7px 0px 0px;
	border-bottom: solid 1px;
	font-size: 110%;
}
/*holds the front and back icons*/
.social-bar .icon{
	display: inline-block;
}
/*back (square) of the stack*/
.social-bar .icon > .back{
	background: #333;
}
/*Front (icon) of the stack*/
.social-bar .icon > .front{
	color: #fff;
}

 <!--HTML for the social media elements -->
<div class="social-bar">
	<p class="header">Join our social media </p>
	<a href="https://www.facebook.com/">
		<span class="icon fa-stack fa-lg">
			<i class="back fa fa-square fa-stack-2x"></i>
			<i class="front fa fa-facebook fa-stack-1x"></i>
		</span>
	</a>
	<a href="https://twitter.com/">
		<span class="icon fa-stack fa-lg">
			<i class="back fa fa-square fa-stack-2x"></i>
			<i class="front fa fa-twitter fa-stack-1x"></i>
		</span>
	</a>
	<a href="https://www.pinterest.com/">
		<span class="icon fa-stack fa-lg">
			<i class="back fa fa-square fa-stack-2x"></i>
			<i class="front fa fa-pinterest fa-stack-1x"></i>
		</span>
	<a>
</div>

Вы должны увидеть серию значков социальных сетей, которые выглядят так:

Сложенные значки работают, оборачивая ваши значки вокруг другого элемента и применяя к нему класс fa-stack

Значки, которые вы хотите использовать в стеке, также должны использовать класс fa-stack Вы можете указать необходимый размер, используя классы размеров, такие как fa-stack-1xfa-stack-2x

Инлайн Элемент Плюсы

• Очень прост в использовании. Примените классы Font Awesome, которые вы хотите, и тогда вы увидите свою иконку
• Вы можете настроить таргетинг на сам элемент с помощью JavaScript / jQuery, то есть вы можете добавить классы или удалить классы, чтобы изменить и изменить отображаемый значок.
• Множество различных стилей и действий на выбор, включая сложенные значки, анимацию, изменение размера и позиционирование. Все они были протестированы, чтобы убедиться, что они работают хорошо и являются кросс-браузерными жалобами (у вас нет головной боли при тестировании всего этого самостоятельно)
• Простое визуальное представление в HTML, чтобы показать, что вы используете значок (псевдоэлементы могут быть пропущены, если они только определены в CSS)

Cons

• Если вам требуется более точное управление, вам нужно применить дополнительные стили / переопределить классы Font Awesome

Вывод

Теперь, когда вы знаете основы получения шрифтов значков для работы в вашем проекте, вы можете расширить свои дизайны и, надеюсь, удалить старые значки на основе изображений / спрайтов в пользу этих новых полностью адаптивных методов!