添加更多的社交图标

这个WordPress网站使用的主题是Hexa (不过自己修改了一些小部件),
里面使用了大量的Genericons字体图标,像是网站右上角的Widget不过由于缺少一些更新的 或者说更加本土化的图标,我需要增加一些上去。

这次使用了Font Awesome的图标,里面提供了像Weibo Steam Telegram之类的原本没有的图标,主要还是像Weibo之类的中国系图标,不经常能在开源项目中见到,值得夸奖。

搜索一下能够找到网上相关教程。根据主题里面的写法,安装好字体之后,在style.css里面直接在content属性中使用图标的Unicode码,当然还要设置font-family。

比如上面的Social Links Widget就是靠这套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
31
32
33
34
35
36
37
38
39
40
41
42
43
.social-links ul a:before {
font-family: "FontAwesome";
color: rgba(255, 255, 255, 0.75);
content: "\f004";
display: block;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 50px;
height: 50px;
}
.social-links ul a:hover:before {
color: white;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.social-links ul a[href*="twitter.com"]:before {
content: "\f099";
}
.social-links ul a[href*="plus.google.com"]:before {
content: "\f0d5";
}
.social-links ul a[href*="github.com"]:before {
content: "\f113";
}
.social-links ul a[href*="telegram.me"]:before {
content: "\f1d8";
}
.social-links ul a[href*="/feed"]:before {
content: "\f09e";
}
.social-links ul a[href*="/sitemap.xml"]:before {
content: '\f0e8';
}
.social-links ul a[href*="steamcommunity.com"]:before {
content: "\f1b6";
}
.social-links ul a[href*="weibo.com"]:before {
content: "\f18a";
}

content属性可以从FontAwesome官网列表中找到,打开一个,比如Weibo 里面会写出

fa-weibo · Unicode: f18a · Created: v3.2 · Categories: Brand Icons

这里的f18a Unicode码就是我们需要的,填进content属性里即可。

注意到在第一个.social-links ul a:before 设置中,使用了content: "\f004"来设定默认值(一颗❤)。在没有找到匹配的情况下使用这个图标,比如高达交友网站Bangumi


而安装字体呢,需要动手添加主题文件夹下的function.php的项目,以实现在载入界面的时候 加载字体。

在我这个主题下有这么个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* Enqueue scripts and styles.
*/
function hexa_scripts() {
wp_enqueue_style( 'hexa-style', get_stylesheet_uri() );

wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.3' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/font-awesome/css/font-awesome.css' );

wp_enqueue_script( 'hexa-menus', get_template_directory_uri() . '/js/menus.js', array( 'jquery' ), '20120206', true );

wp_enqueue_script( 'hexa-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}

add_action( 'wp_enqueue_scripts', 'hexa_scripts' );

函数的目的是添加加载项。注意到高亮的第8行,在这里我们用路径加载了图标字体。

整体使用就是这么简单,不过这只是一种使用方式,FontAwesome还提供了另一种HTML加载方式:

<i class="fa fa-weibo" aria-hidden="true"></i>

可以添加到网页模板上,在加载网页时自动载入。不过我没有用上,抱歉···