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


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

相关文章
|
6月前
|
小程序 IDE 搜索推荐
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
68 0
|
5月前
|
CDN
WordPress中文网址导航栏主题风格模版HaoWa
HaoWA主题风格除行为主体导航栏目录外,对主题风格需要的小控制模块都开展了敞开式的HTML在线编辑器方式的作用配备,另外预埋出默认设置的编码构造,便捷大伙儿在目前的编码构造上开展作用调节。另外添加了字体图标FontAwesome的CDN。 HaoWa主题风格导航栏详细介绍:适用混合开发响应式网站适用网站内部及外站检索适用头顶部banner背景图案自定适用莱单自定适用归类锚链接定项适用导航栏详细介绍网页页面适用文章分类目录适用自定首页导航按键适用文章投稿网页页面适用底端四栏作用自定适用归类CMS子归类控制模块
52 1
|
6月前
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺序 原版–>美化包–>后台启用子主题(已启用请忽略)。
164 0
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
|
缓存 Java Maven
为网站设置欢迎页面和自定义网站的图标教程~
为网站设置欢迎页面和自定义网站的图标教程~
|
数据可视化 前端开发 JavaScript
漏刻有时数据可视化大屏引导页设计(php原生开发、主背景图片更换、标题设置)
漏刻有时数据可视化大屏引导页设计(php原生开发、主背景图片更换、标题设置)
140 0
移动端也能兼容的web页面制作2:导航栏、背景图片设置(上)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
270 0
移动端也能兼容的web页面制作2:导航栏、背景图片设置(下)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
225 0
|
JSON 小程序 数据格式
【微信小程序】动态设置导航栏标题
这种方法是使用app.json或者页面的json文件配置导航栏标题。如果是在app.json中进行配置,则它是全局行为,项目所有的页面将显示同一个标题;如果是在页面的json中进行配置,则只会影响当前页面。
|
存储 搜索推荐 机器人
在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)。
1309 0