Hexo fluid主题如何自定义iconfont图标 - Hexo

最新推荐文章于 2025-03-31 20:25:14 发布
最新推荐文章于 2025-03-31 20:25:14 发布
阅读量1.7k 收藏 6
点赞数 4
分类专栏： # 网站搭建 文章标签： github fluid hexo iconfont 自定义图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36852780/article/details/112166727
版权

设置步骤

一. 添加自定义图标的css

  1. 打开iconfont官网, 找到自己想要的图标(可以关键字搜索), 选择第一个购物车, 然后下载代码
    在这里插入图片描述

  2. 下载保存到本地, 将文件重命名, 移动到 hexo/themes/fluid/source/css目录下
    在这里插入图片描述

  3. 打开主题目录下的_config.yml文件, 在 custom_css后面添加上新增的css文件, 如图:
    在这里插入图片描述

二. 使用刚添加的图标

在这里插入图片描述
这就是刚刚添加的图标的样式, 这样就可以正常使用, 问题出现了, iconfont是必填的, 后面的 icon-csdn 或者 icon-netease-cloud-music-line 是哪里找到的呢?

这是, 打开你下载的代码目录下的 demo_index.html 文件,
在这里插入图片描述

基于Hexo的主题Fluid搭建Github博客
算法工程师
05-19 1367
基于hexo的主题fluid创建github博客一、github配置1.安装Git2.部署本地Git与Github连接二、node.js安装和环境配置1.安装node.js2.查看安装是否成功（版本号）3.配置环境变量三、下载Hexo并配置fluid主题1.下载Hexo2.配置fluid主题1.安装fluid2.配置fluid3.更新部署博客页面4.部署到github...
Hexo Fluid主题配置教程，详细到每一行代码
weixin_49270402的博客
06-07 9348
【手把手系列2】傻瓜式 Hexo 之 Fluid 主题配置教程 0. 前言 Hexo搭建好的博客是使用landscape主题，看起来挺丑的…不是很喜欢，所以我们到hexo官网上寻找一些好看的主题进行更改。 hexo主题网站： https://hexo.io/themes/ 这里有几百个主题供你选择，由于太多而且网站中也没有对这些主题进行筛选的功能，让人难以选择，所以我们推荐到github上寻找合适的主题： 从而可以看出，最受欢迎的是Next主题，还有几个主题的star数也不少，大家根据自己的喜好挑选
Hexo的Fluid主题中自定义iconfont图标
山阴少年
07-29 627
本文将介绍如何在Hexo的Fluid主题中自定义iconfont图标，并纠正现有公开博客文章的错误。
Hexo-使用阿里iconfont图标
MoYu's Blog
02-12 2510
Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中，大家并不懂都有什么图标，fa fa-xx就懵了，不知道都有什么。 首先，fa fa-xxx中的图标可以在 图标库 中寻找。 (上面慢的话，可以在这个：另一个图标库) 例如： 首页: / || fa fa-home 归档: /archives/ || fa fa-archive 标签: /tags/ || fa fa-tags 显而易见，就算能找到也有很多图标找不到，所以这个时候，我们可以选择使用阿里iconfont图
[Mac]利用hexo-theme-fluid美化个人博客
最新发布
程序员雅痞的博客
03-31 1075
使用hexo+fluid搭建个人博客，并附上一些个性化配置
如何在 Hexo Blog 网站上添加图标（iconfont 使用）
Leafy's draft about ML
12-10 1103
最近一个月折腾了一个github.io的blog，采用hexo生成，但是因为喜欢的主题缺少社交软件的图标，因此要自己添加。如何添加就是本文的主要内容。
控制Web应用程序的Fluid.app图标
culuo8053的博客
07-25 286
Fluid.app is an nice Mac application for creating desktop applications that wrap a web application. All you need to do is give Fluid.app a URL and a name, and the application generates a .app fi...
hexo next 主题字体图标失效（丢失）
曹先森的博客
01-08 3691
hexo next 字体图标都不显示了， 报错如下： localhost/:1 Refused to apply style from 'http://localhost:4000/lib/font-awesome/css/font-awesome.min.css?v=4.6.2' because its MIME type ('text/html') is not a supported st...
hexo-theme-fluid：一种材料设计风格的Hexo主题Hexo的优雅Material-Design主题
02-03
npm install --save hexo-theme-fluid 然后在博客目录下创建_config.fluid.yml ，将主题的内容复制进去。 方式二： 下载解压到主题目录，合并解压出的文件夹重命名为fluid 。 3.指定主题 如下修改Hexo博客目录中的_...
Hexo Fluid添加tag-cloud插件
zhengzhehui的博客
02-26 637
前言 官方文档：https://github.com/D0n9X1n/hexo-tag-cloud/blob/master/README.ZH.md 效果参考（需要科学上网）：https://zhengzhehui1110.github.io/zhengzhehui.github.io/tags/ 在搭建博客的过程中无意间看到某个大佬的博客有很炫酷的动态标签云，瞬间心动了，于是决定自己也安装一个。tag-cloud插件比较特殊，根据官方文档，它需要将一段代码替换原本的标签云。而标签云的代码位置可能会根据主题
Hexo-Fluid主题美化
林慕凡的博客
11-19 8587
一款 Material Design 风格的主题 An elegant Material-Design theme for Hexo ### 效果预览：https://bynote.cn   我是一个十分纠结的人，以前用的butterfly主题，界面、功能、视觉都非常强悍和强大的主题，使用的人非常多，但是我不喜欢内容页面的宽度，我又不会调，直到又一天我看到了fluid主题，一下子就心动了，马上开始测试，不知道为什么，新建页面的评论无法开启，直接给page上评论代码都不行，在lantyou里开启..
Hexo站点建设之——修改网站图标
我的博客
12-03 4586
一 概述 自建站点为何显示的是主题图标 如何查找网站图标 如何修改网站图标 二 自建站点为何显示的是主题图标 使用hexo搭建好的站点，网站的图标默认显示的是，右键检查，网站源码—>Elements标签下—>head，可以看到Hexo next主题默认的网页图标使用的是hexo-theme-next/source/images/favicon-next 三 如何查找网站图标 从下列站点下载免费图标，并修改名字为favicon对应的名字 阿里巴巴矢量图标库 easyicon 四 如何
一次性搞定 Iconfont
weixin_34262482的博客
11-16 357
一次性搞定 Iconfont 原文链接：https://github.com/bsdfzzzy/iconfont-all-in-one 一次性搞定 IconFont 什么是 IconFont IconFont 的背景 WebFont Images CSS Sprites IconFont IconFont 原理 IconFont 的优缺点 优点 不足 快速使用现有的 IconFon...
修改网页标题栏小图标
XYQ689的博客
04-13 778
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 网页标题自定义图标实现：在网上...
Hexo + NexT 通过自定义样式添加 Bilibili 图标
程序员「阿基米东」的编程之旅
02-27 2866
NexT 默认使用 Font Awesome 库作为 icon 库。美中不足的是，有一些中国的社交网站的图标在 Font Awesome 库中并没有提供，包括我们熟悉的哔哩哔哩、豆瓣、简书等等。所以如果想使用这些图标，就需要我们使用本地图标进行手动添加。 首先，可以在 阿里巴巴矢量图标库 之类的网站找到你需要的图标，下载 SVG 格式文件。以 Bilibili 为例，将 SVG 文件放置在 hexo 工程的 /source/images/bilibili.svg 中。 编辑 source/_data/sty
hexo设置网站的图标Favicon
热门推荐
阿甘的博客
01-12 1万+
实现效果图 具体方法实现 ico图标 32*32 去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：
Hexo攻略-更换网页图标
qq_39181839的博客
11-03 5247
Hexo攻略—更改网页图标 Hexo next主题默认的网页图标长这个样子~ 当然要和别人不一样！ 下载图标 自己也可以绘制，懒得话就去下载，到这里进行下载，ico文件和png都可以，我下载的是ico 修改文件名 下载的图标重命名为favicon.ico，位置放在/themes/next/source/images 修改主题配置文件 在/themes/next/_config.yml中修改成自己的图标 favicon: small: /images/favicon.ico #medium: /i
更换Hexo的网页图标/小图片Hexo change page favicon
Yu's Notes
06-20 8631
自己原创文章link:https://wangxiaoyu-go.github.io/2018/11/18/change-theme-favicon/ Table of Contents 说明 制作favicon图标 图片位置与编辑配置文件 说明 本文介绍的是主题theme配置文件中的修改方式，也就是说仅适用于被修改的主题。 另外还有在hexo根目录下设置favicon的方式，...
hexo+yilia主题博客如何添加图标icon
diaojian0245的博客
11-28 885
1. 先去比特虫网站做icon图标 2. 图片放到hexo/source/img文件夹下 3. 找到hexo\themes\modernist\layout_partial\head.ejs，设置为 <% if (theme.favicon){ %> <link rel="icon" href="/img/favicon.ico"> ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值