Содержание
На Crunchify мы всегда стремимся улучшить скорость страницы и, как вы, наверное, видели в моем последнем посте, как мы убрали загрузку 9 высоконагруженных ресурсов на сайте. Одна из причин, по которой мы смогли это сделать — это использовать FontAwesome.io fonts на Crunchify.
Все иконки социальных сетей на боковой панели , заголовок стрелка вниз , выложите мета-иконки ( , ), Кнопки «Поделиться в социальных сетях» внизу каждой страницы и т. Д. — это потрясающие шрифты.
Мне не нужно загружать эти значки .png or .jpg по отдельности. Это очень просто о том, как добавить шрифты font-awesome.io к любому сайту WordPress, и мы хотели бы поделиться шагами о том, как это сделать.
- Как легко добавлять иконки шрифтов в тему WordPress
- Использование Font Awesome в вашей теме WordPress
- установить и интегрировать шрифт в WordPress
Давайте начнем:
Шаг 1
Загрузите шрифты font-awesome.io с домашней страницы. Просто нажмите на No thanks, just download load Font Awesome ,
Шаг 2
Распакуйте его на свой local drive и с помощью FTP поместите его в папку под /wp-content/icon папка.
В моем случае вот
complete URL: https://crunchify.com/wp-content/icon/font-awesome/css/font-awesome.min.css
Шаг 3
Перейдите к своей теме WordPress и enqueue потрясающий шрифт CSS для вашей темы. Просто добавьте ниже код вашей темы functions.php файл.
|
1
2
3
4
|
add_action ( 'wp_enqueue_scripts' , 'crunchify_enqueue_fontawesome' ) ;
функция crunchify_enqueue_fontawesome ( ) {
wp_enqueue_style ( 'font-awesome' , 'https://cdn.crunchify.com/wp-content/icon/font-awesome/css/font-awesome.min.css' ) ;
}
|
Убедитесь, что теперь CSS загружается на ваш сайт правильно.
Вот и все. У вас все настроено.
Шаг 4
Теперь, как добавить социальные медиа и другие значки в тему WordPress? Давайте возьмем социальный пример кнопки следования.
Поместите этот код в виджет боковой панели :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
< div class = crunchify-social-share-sidebar >
< а target = _blank href = http://feeds.feedburner.com/Crunchify class = crunchify-social-icon-rss crunchify-social-icon >
< я class = fa fa-rss fa-2x > < / i > < / a >
< а target = _blank href = https://twitter.com/crunchify class = crunchify-social-icon-twitter crunchify-social-icon >
< я class = fa fa-twitter fa-2x > < / i > < / a >
< а target = _blank href = https://www.google.com/+CrunchifyDotCom class = crunchify-social-icon-googleplus crunchify-social-icon >
< я class = fa fa-google-plus fa-2x > < / i > < / a >
< а target = _blank href = https://www.facebook.com/Crunchify class = crunchify-social-icon-facebook crunchify-social-icon >
< я class = fa fa-facebook fa-2x > < / i > < / a >
< а target = _blank href = https://www.pinterest.com/Crunchify/crunchify-articles/ class = crunchify-social-icon-pinterest crunchify-social-icon >
< я class = fa fa-pinterest-p fa-2x > < / i > < / a >
< а target = _blank href = https://www.youtube.com/c/CrunchifyDotCom class = crunchify-social-icon-youtube crunchify-social-icon >
< я class = fa fa-youtube fa-2x > < / i > < / a >
< а target = _blank href = http://profiles.wordpress.org/crunchify class = crunchify-social-icon-wordpress >
< я class = fa fa-wordpress fa-2x crunchify-social-icon > < / i > < / a >
< / div >
< div style = clear: both > < / div >
|
Поместите этот код в вашу тему WordPress style.css файл:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
.crunchify-social-icon {
поле : 1px 7px 5px 7 пикселей ;
}
.crunchify-social-share-sidebar {
нижнее поле : 25 пикселей ;
}
.crunchify-social-icon-rss {
цвет : # f26522 ;
}
.crunchify-social-icon-twitter {
цвет : # 00aced ;
}
.crunchify-social-icon-facebook {
цвет : # 3b5998 ;
}
.crunchify-social-icon-pinterest {
цвет : # cb2027 ;
}
.crunchify-social-icon-wordpress {
цвет : # 21759b ;
}
.crunchify-social-icon-googleplus {
цвет : # dd4b39 ;
}
.crunchify-social-icon-email {
цвет : # 666 ;
}
.crunchify-social-icon-youtube {
цвет : # bb0000 ;
}
|
Вы сможете увидеть приятную кнопку Social Follow на своем сайте.
Вот живой пример:
Еще несколько образцов:
1. Недурно:
2. Сердце:
У вас будет возможность выбрать любые значки из общего числа ~630 fonts доступны там. Дайте мне знать, если у вас возникнут проблемы.
Если вы используете MaxCDN, то включите Allow Cross Origin Resource Sharing ошибка.
0.00 (0%) 0 votes
