# 导航栏菜单添加Font Awesome图标

# 注册Font Awesome

Font Awesome是一个很热门的在线图标库

跟以前（Font Awesome 4之前的版本？）不同，现在要使用官方最新版本的图标，首先需要在官网注册一个号，然后来到Kits页面，点击"Add a New Kit"添加一个Kit file

# 导入自己的Kit

然后点击这个Kit进入详情页面，在Set up选项卡下可以看到一行script代码 file

把它复制下来，然后在WordPress后台，选择“外观-主题文件编辑器”，然后在右侧找到header.php，把script添加到这里面注意插入的位置要在<head>标签中，可以插入在自带的fonts.loli.net字体引入之后 file

# 寻找想要的图标

接下来就可以开始找自己想要的图标了，点击Font Awesome网页导航栏里的放大镜如果你用的是免费版，可以把这三项选中，里面的图标就都是免费版可以使用的 file

点击下面的图标，可以在详情页配置图标动画、旋转角度、颜色、样式（收费的）等等，配置完后点击下面的HTML代码复制下来 file

# 导入到导航菜单里

在WordPress后台选择“外观-菜单”，然后在导航标签里面直接粘帖上刚才复制的<i>元素，就可以正常显示了 file

最后的效果 file

# 修改左上角导航栏白猫样式Logo的字体

# 准备工作

参考了这个大佬的文章！除了改字体，还可以改样式

首先需要下载好Fontmin客户端，Fontmin的作用是提取字体的子集方便网络传输（比如在Logo里面只会用到字体里面的其中几个字，没有必要把整个字体文件都下载下来）

然后开始找自己想要的字体，我这里选择了方正喵呜体，看起来比较适合作为Logo file

下载字体的ttf文件，接下来可以在Fontmin里面打开这个字体，然后输入自己需要的字符看看效果 file 然后问题来了，Logo里面有一个假名“の”，但是方正喵呜体里没有设计日文的字体，所以还要另外找一个单独的日文字体，并且想个办法把缺少的日文字体合并进来（当然如果不需要的话可以跳过这一步）

经过一番搜索，我找到了一个和喵呜体风格比较类似的日文字体うずらフォント，看起来长这样 file 同样下载下来字体的ttf文件

# 使用FontForge合并字体

参考了这篇完美字体合并教程

首先在这里下载FontForge，根据自己的操作系统来选就好

然后用FontForge分别打开两个要合并的字体，界面看起来长这样 file

# 调整Em Size

菜单选择"Element-Font Info"，弹出的窗口中左边选择General，然后在右边可以看到字体的Em Size file 比如原来方正喵呜是256，うずら是1024，需要把小的那个改成跟大的一样（注意勾选Scale Outlines）

# 合并需要的字符

因为这里我只需要うずら的日文假名部分，其他字符都保留方正喵呜的字体，所以先在窗口里找一下两个字体中的日文假名

找了一下，日文假名的UTF-8编码从0x3041开始，如下图 file

然后用鼠标拖动，选中うずら所有假名的部分（从0x3041选中到0x30fe） file

ctrl+c复制，然后在方正喵呜里面点0x3041的地方ctrl+v粘帖！ file

# 修改字体名字

修改字体名字是为了避免字体和合并前的字体重名

在菜单选择"Element-Font Info"，左边选择PS Names，然后修改右侧的Fontname, Family Name, Name For Humans file

[buy]如果不需要把字体安装到系统中在其他地方使用，可以像这里一样只修改PS Names，否则的话请参考引用的那篇教程做更详细的修改[/buy]

# 导出字体

菜单选择"File-Generate Fonts"，在下面的第一个下拉菜单里选择TrueType，也就是ttf格式，同时取消勾选下面的Validate Before Saving 然后点击Options，取消勾选TrueType Hints file

# 在Fontmin中导出字体子集

在Fontmin里打开导出的ttf文件，输入需要的字符再来看看效果 file

看起来觉得OK了，点击下面的生成，生成完后会自动弹出输出的文件夹

# 上传并配置字体

把整个文件夹放到wp-content/themes/Sakurairo-2.5.6/inc/fonts路径下（如果没有fonts文件夹就新建一个，当然放别的地方应该也没问题）

WordPress后台选择“外观-主题文件编辑器”，编辑header.php 在和上面导入Font Awesome同样的地方插入下面的CSS引用，注意替换你的路径

<link rel="stylesheet" type="text/css" href="/wp-content/themes/Sakurairo-2.5.6/inc/fonts/字体文件夹名字/字体名字.css">

然后WordPress后台选择“iro主题设置-全局设置-导航菜单设置”，在最下方的“导航菜单文字Logo选项”里的字体名称改成刚才导出的字体名称 file

保存！就可以看到效果了

另外，如果文本ABC文字太长，二级文字太短，二级文字会被拉宽间距，有点不好看 file 可以在二级文字里面加上全角空格( )来调整，比如这里想要二级文字在文字C的正下方，就在文字前面添加一堆全角空格，最后会变成这样 file

# 页尾添加IPInfo信息

参考了这篇文章，但是它好像是转载的另一个大佬的博客文章，但是那个博客我打不开了

首先找一个查询IP地理位置的接口，国内国外都有做这些的企业我这里选择的是国外的IPinfo，因为免费也能用，但是对于国内的IP地址准确性应该不如ipip和ipplus360，但是国内这两家似乎都不对个人用户提供API接入

# IPinfo的API查询接口

先到IPinfo官网注册一个号，然后来到自己的account页面，在home的最下方就会看到token和最基本的Geolocation Data的请求方式 file

随便拿一个IP请求，看看返回的结果

{
  "ip": "103.76.87.**",
  "city": "Tokyo",
  "region": "Tokyo",
  "country": "JP",
  "loc": "35.7085,139.7747",
  "org": "AS147001 LANDUPS CO., LTD",
  "postal": "110-0005",
  "timezone": "Asia/Tokyo"
}

返回的信息里面，IP地址、城市、区域（省份）、国家或地区、ASN都比较有用，经纬度实测并不准确，差距可能有几十km，参考意义不大（当然想留下来的话按下面的步骤自己再添加就OK了）

# 在主题中配置

在WordPress后台选择“外观-主题文件编辑器”，然后在右侧选择footer.php，找到里面的<div class="footer-device function_area">这个块，然后在块里面找一个合适的位置用来显示IP信息

比如我这里是让它显示在内存占用信息之前，那么先找到显示内存占用的代码 file

然后添加下面的代码，注意替换你的token

<?php $address=$_SERVER["REMOTE_ADDR"];
    if($address!=''):
        $query_url="https://ipinfo.io/".$address."/json?token=你的token";
        $data=json_decode(file_get_contents($query_url));
        printf('IPInfo '); ?>
        <a href="https://ipinfo.io/<?php echo $data->ip?>" rel="noopener" target="_blank"><?php echo $data->ip?></a>
        <?php printf(
            ' %s, %s, %s  %s',
            $data->country, $data->region, $data->city, $data->org
        ); ?>
<?php endif; ?>
<br>

代码里面第3、4行发起HTTP请求并将结果存到$data里，第6行把IP地址部分以超链接的形式显示，然后printf打印剩余的country, region, city, org等信息

然后保存，在页尾就会显示IPinfo，IP地址部分的超链接可以跳转到对应IP地址的IPinfo的网页版查询

file

Sakurairo WordPress主题图标字体美化