个人网站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


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

相关文章
|
7月前
|
小程序 IDE 搜索推荐
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
71 0
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
232 0
|
7月前
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺序 原版–>美化包–>后台启用子主题(已启用请忽略)。
179 0
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
|
缓存 Java Maven
为网站设置欢迎页面和自定义网站的图标教程~
为网站设置欢迎页面和自定义网站的图标教程~
移动端也能兼容的web页面制作2:导航栏、背景图片设置(上)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
279 0
移动端也能兼容的web页面制作2:导航栏、背景图片设置(下)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
229 0
|
搜索推荐
自己制作网站有哪些注意事项
在互联网时代,建设网站早已不再是企业才会有这类需求的,不少个人也开始需要建设自己的网站,他们可能是因为要进行创业,有的是想让自己的作品得到更好的推广。所以,怎么自己制作网站就成为大家比较关心的问题。随着网站建设技术的不断升级,这也让之前很专业的网站制作变得简单起来。一般人要想建设一个自己的网站其实并不难。
184 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)。
1310 0
|
Web App开发 前端开发 JavaScript