添加更多的社交图标

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

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

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

比如上面的Social Links Widget就是靠这套css实现的

.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的项目，以实现在载入界面的时候 加载字体。

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

/**
 * 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>

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