Font Awesome - подключение в WordPress

Wordpress
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

Версия 4.7.0

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
    wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Загрузка Font Awesome в тему

Для этого нужно создать папку fonts в директории темы и поместить туда шрифт. Добавить в functions.php:

function wpb_load_fa() {
 
wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Иконки Font Awesome

Использование шоркодов

add_shortcode('fa', 'pe_fa');
if ( !function_exists('pe_fa') ) {
	function pe_fa( $atts, $content ) {
		$a = shortcode_atts(
			array(
				'class' => '',
				'title' => '',
				'desc' => '',
			), $atts);

		$class = esc_attr( $a['class'] );
		$title = esc_attr( $a['title'] );
		$desc = esc_attr( $a['desc'] );

		$html = '';
		$html .= '<span class="fa fa-3x ' . $class . '" aria-hidden="true" style="float: left; margin: 0 10px 5px 0;"></span>';
		$html .= '<span class="pe-title" style="display: block; font-size: 2em;">' . $title . '</span>';
		$html .= '<span class="pe-desc" style="display: block;">' . $desc . '</span>';

		return $html;
	}
}

if( ! function_exists('pe_styles') ) {
	function pe_styles() {
		wp_enqueue_style( 'fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', '4.7.0' );
	}
}
add_action( 'wp_enqueue_scripts', 'pe_styles' );

Использование:

[fa class="fa-user" title="title example 1" desc="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"]

Вариант:

function font_awesome() {
  if (!is_admin()) {
    wp_register_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css');
    wp_enqueue_style('font-awesome');
  }
}
add_action('wp_enqueue_scripts', 'font_awesome');

Если установлен плагин WPBakery (Visual Composer), шрифт будет подгружен из его директории.

Также можно использовать плагин Better Font Awesome

Articoli correlati