前言
经常逛各位大佬博客的朋友，会发现其中一些博客在菜单栏上使用了图标，给整个界面增添了一份精彩和活力。我觉得这个方法很棒，因此想与大家分享一下，希望大家也能尝试一下，感受一下这种有趣的效果。
美化教程
其实这些图标大多数都是Font Awesome图标，Sakurairo主题默认都引用的有这些图标，所以我们在添加的时候无需再去引入。添加图标的位置在后台 > 外观 > 菜单 > 菜单结构 > 导航标签。
添加图标的格式为：
<i class=" fa 图标代码"></i> 导航文字
例：
<i class="fa fa-paper-plane"></i> 首页图标的代码可以到Font Awesome官网找到，复制格式为fa-xxxx的代码粘贴到图标代码的位置即可。在添加的时候有些图标会添加不成功，那么很有可能是引入的版本问题，解决办法是将你使用的图标版本css引入进去就行了，我这里使用的是Font Awesome V4版本，所以我这里还需要引用V4版本对应的css。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />在header.php文件文件中的head标签中引入。
<head>
<!-- 这是Sakurairo主题引入的Font Awesome图标 -->
<link rel="stylesheet" href="<?= $vision_resource_basepath ?>fontawesome/css/all.min.css" type="text/css" media="all"/>
<!-- 这是我们自己引入的Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>预览效果
首页 动态 朋友圈© 版权声明
THE END
- 最新
- 最热
只看作者