免费图标库网站可以看这里免费图标库-Font Awesome&iconfont – LeeyaLive。
由于iconfont还挺好用的所以这里以iconfont的流程举例说明。
由于iconfont还挺好用的所以这里以iconfont的流程举例说明。
Font-class 引用核心优势
- 语义明确:
icon-home
比
更易理解; - 维护方便:只需修改
class
即可更换图标; - 良好兼容:支持 IE8+ 及所有现代浏览器;
- 样式控制:可通过 CSS 轻松调整大小和颜色。
四步完成 font-class 引用
步骤一:创建图标项目
1.访问 iconfont.cn 并注册登录;
2.将所需图标加入”购物车”;

3.点击购物车 → “添加至项目”(新建或选择已有项目);

步骤二:获取在线链接
1.进入”资源管理” → “我的项目” → 选择 font-class 选项卡→点击”查看在线链接”;

2.复制生成的 CSS 链接(格式如://at.alicdn.com/t/c/font_4943312_xxx.css
)。
步骤三:引入 CSS 文件
在 HTML 的 <head>
中加入:
<!-- 引入 iconfont 样式 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4943312_xxx.css">
使用WordPress的Argon主题可以在页头脚本里添加,其他主题如果不自带页头脚本,可以先安装Head, Footer and Post Injections
插件并启用。
步骤四:使用图标
<!-- 基础用法 -->
<i class="iconfont icon-search"></i>
<!-- 添加自定义样式 -->
<span class="iconfont icon-user" style="color:#f00; font-size:24px;"></span>
<!-- 搭配文字使用 -->
<button>
<i class="iconfont icon-download"></i> 下载文件
</button>
⚠️重要注意事项
1.链接有效期
- 阿里图标链接默认有效期为1年;
- 建议每年检查更新链接(重新生成后替换即可)。
2.多色图标限制
font-class
不支持多色图标;- 需要多色图标请使用
symbol
引用方式。
评论