个人网站7-自定义图标支持

简介: 个人网站7-自定义图标支持

Hexo NexT 原始主题是采用了 Font Awesome 图标,并未包含如微信公众号,知乎这些社交网站图标。

下载图标

首先,前往 阿里巴巴矢量库 挑选需要的图标,在图标上点击 "购物车" 将其加入购物车。

选择「下载代码」,会将所有的图标一起下载下来

修改主题配置文件_config.yml

将下载的文件解压后,在里面,找到 iconfont.css 文件,打开后将其中的所有内容都复制加入到主题 CSS 自定义文件source\_data\styles.styl 中的任意位置。

//自定义图标 font-class引用
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1616849051933'); /* IE9 */
  src: url('iconfont.eot?t=1616849051933#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQIAAsAAAAACEwAAAO5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEIIN+ATYCJAMMCwgABCAFhG0HSRtXBxHVmynJfiTYtnFSVsx/DkRyF+lM8Py/Tr1P+lEEYSgxqAQsly0XGCfAYUk3Q3limnocAFubUotQlRGKJTkPvsv/SH4wwuVD18/fz9dFAW6Wx2ZzqbjvLZuyMW2AA5sOqBurhDeQD+R/GLvyIvZDAJsSaiGduvRyMVEYwwSQmdOmjMNMmVA1hYKJYJTMVcgOEjC1oFYGbPd/L59oICZoJOgYY/tN7jyRdm+S31q6F/cY6RKQjecA2CLQgVqAAhld6hqKHkZroWMrSNVnGigEbaxAPI4vVXFjpf94GoiBgZIgtZpGOymZLYDAW0sCMc7fA0aP5stI+ggfAQ07qUDl5+daVrpty4rIm0Hh12707eDYu2lDzoRtPzokFhsUilQeci5qh8NuOJJoE0vMNDMm+IOjUUsdqBJBZmhQJGL0XNW03PeQl0WhKhRo5hgWysbi8q2PRpq7QxqfdUK5hyQWGxza6+3xzwXOu44kgY1rIu7b/fytqr0b3IuN9/cF9juyzgnb2OV076kqV049NQ3lyjnK+NP7P9oz9rlm5UkTuxrd7f6BdiOoMcienDz3X2+zxVHebkxfbc28GbwmrVwTD+IOjawytLLvVx5aZWSZ5a88zA/q9pFVyqB/WOVgEMpKWEOD/rCLGBPujxpYsX/5Vasr9Kvo3q04sEL/Vav6VxhY8a5bsV+F1avK9684EFzELd9v9ep+5d2KuaOcE2ldA8OGME7Wzdbc1Lp9HuR07l9tScNscZ3JBdJ79pRq7VK+FXwralvQd2/zFNfQtih1t7d3pev80f3Eldmjpat0mT3GlbQq+k+rRq2OqpP1MuOllfw/4/+CkJHyZUEy5QCIe0p077//DYmND10fk9rqj+koAF5s6H7Yl7fzgPlW3AJ/uUQB8bi6cIVh1pUstaV6QmeD/Q7FUMwx/m0xQAav+uPZrfNBMMmOQSORYtAxqURU1FqQgEMjMDBpCzY16brYIZP56IiygBpsACCkcR00UngEOmk8JirqS0gghy9gkCY62AyWzDUdqsg02+4oaBQ92B8kxztZVq2DwhuGczWSVPjsF0pJAeibLpuYcUcZY0J5h0GVgIQ3mMBhuK4Mh3BGp01UPca2pbI7NY63qqajoFH0YH+QHO/kNtY69/0bhnM1UlNVEX6hlNQ69E3XgjijvVXVtRxT3mFQJSDhDSbgwNWMMhzlvTI6bWKP8DG2qB61Rc38+PZ8cR5iDWNNXTTRRaEmFL9fP5i+aQ9sGf7R6RYNh9Psa6oqAAAA') format('woff2'),
  url('iconfont.woff?t=1616849051933') format('woff'),
  url('iconfont.ttf?t=1616849051933') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1616849051933#iconfont') format('svg'); /* iOS 4.1- */
}
//以下代码相对下载下来的代码做了部分修改
.iconfont {
  font-family: "iconfont" !important;
  font-size: inherit; //修改!
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.csdn:before {
  content: "\e50d";
}
.weixin:before { //修改!
  content: "\e609";
}

主题注入功能

修改/themes/next/_config.yml

custom_file_path:
-  #style: source/_data/styles.styl
+  style: source/_data/styles.styl

使用说明(侧边栏)

social:
  GitHub: https://github.com/user_id || fab fa-github
  Zhihu: https://www.csdn.com/people/user_id || iconfont csdn
  Douban: https://www.douban.com/people/user_id/ || iconfont douban

重新部署项目即可看到效果。

参考:https://blog.dlzhang.com/posts/32/?highlight=hexo


本篇文章到这里就结束啦,如果喜欢的话,多多支持,欢迎关注!

相关文章
|
2月前
|
小程序 IDE 搜索推荐
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
38 0
|
6月前
|
缓存 Java Maven
为网站设置欢迎页面和自定义网站的图标教程~
为网站设置欢迎页面和自定义网站的图标教程~
|
11月前
移动端也能兼容的web页面制作2:导航栏、背景图片设置(上)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
233 0
|
11月前
移动端也能兼容的web页面制作2:导航栏、背景图片设置(下)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
204 0
|
存储 搜索推荐 机器人
在Joomla中创建自定义404页面
默认情况下,Joomla不提供可以轻松创建和管理的404页面。当你的访问者访问你网站上的一个失效的URL时,404是非常有用的。 我将演示如何创建自定义404页面。 我们将创建一篇文章,添加一个菜单链接,然后在模板文件夹的文件中添加一些代码。
|
Web App开发 iOS开发
对Web设计有用的10组免费漂亮的图标
图标,使用在正确的位置,正确的选择,可以充分表达出思想和信息。漂亮的有品位的图标,可以帮助Web开发者的设计更能吸引用户的注意。 下面是10组,免费并且漂亮的图标,希望能让你的Web设计增辉! Iconic Iconic由136个高度灵活性的图标组成,具有不同的颜色和5种不同的尺寸(8×8, 12×12, 16×16, 24×24 & 32×32)。
1263 0
wordpress文章顶部添加广告位的方法
这段时间,我一直想给我的wordpress博客添加广告位。虽然我这个模板自身有添加广告位的方法,不过感觉还不够用。我是想给wordpress文章顶部添加广告位的,经过这段时间的寻找,也终于解决了这个问题。下面,比尔云就和大家分享wordpress文章顶部页面添加广告位的方法。
2784 0
WordPress添加自定义sidebar侧边栏功能
WordPress模板一般都有自定义sidebar侧边栏功能,以前也给大家讲解过如何自定义sidebar侧边栏,而当做WordPress模板的时候,那怎么实现这功能呢?接下来给大家分析一下。
4083 0