• 089花盆植物
    
  • 088幻灯片
    
  • 087下单指向
    
  • 083按钮对号
    
  • 082按钮加号
    
  • 086按钮减号
    
  • 085按钮警示
    
  • 084按钮信息
    
  • 081按钮右箭头
    
  • 073腾讯微信
    
  • 077Facebook
    
  • 079Whatsapp
    
  • 080Linkedin
    
  • 075新浪微博
    
  • 078Telegram
    
  • 074腾讯QQ
    
  • 076推特X
    
  • 066左双指向
    
  • 072Algolia搜索
    
  • 071机器人AI
    
  • 070加号添加
    
  • 069即刻
    
  • 068加载中
    
  • 067垂直更多
    
  • 065钉子置顶
    
  • 064左单指向
    
  • 063新窗口
    
  • 062回环链接
    
  • 061云朵下载
    
  • 056暂停
    
  • 059粘贴
    
  • 054复制
    
  • 055播放
    
  • 057上一个
    
  • 058下一个
    
  • 051向左箭头
    
  • 052向右箭头
    
  • 053向上箭头
    
  • 047版权协议
    
  • 048共享协议BY
    
  • 049共享协议NC
    
  • 050共享协议ND
    
  • 044书本教程
    
  • 045星星精选
    
  • 039语言简体
    
  • 038语言繁体
    
  • 037爱发电赞助
    
  • 036折叠地图
    
  • 035菜单三横线
    
  • 046小手赞赏
    
  • 033右单指向
    
  • 032消息评论
    
  • 031热度火花
    
  • 030定位地点
    
  • 029时间时钟
    
  • 027日期日历
    
  • 025眼睛张开
    
  • 028Word文件
    
  • 026三人成组
    
  • 024刷新
    
  • 023右双指向
    
  • 022主页房子
    
  • 020指右按钮
    
  • 019关闭
    
  • 018快捷键
    
  • 017隐藏侧栏
    
  • 016开往
    
  • 013随机文章
    
  • 011网址收藏
    
  • 008博客留言
    
  • 041Mail图标
    
  • 012综合导航
    
  • 043Bilibili图标
    
  • 060评论引用
    
  • 004即刻短文
    
  • 002全部分类
    
  • 010关于本站
    
  • 001文章列表
    
  • 009宝藏博主
    
  • 042Github图标
    
  • 007友情链接
    
  • 021井符标签
    
  • 005时光相册
    
  • 015中控台
    
  • 034昼夜切换
    
  • 006音乐欣赏
    
  • 003全部标签
    
  • 014搜索
    
  • 040广播随机
    

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 默认情况下不支持多色，直接添加多色图标会自动去色。

使用步骤如下：

第一步：引入下方内容

@font-face {
  font-family: 'flecicon';
  src: url('https://txycos.talen.top/web/flecicon/iconfont.woff2?t=1717775719011') format('woff2'),
       url('https://txycos.talen.top/web/flecicon/iconfont.woff?t=1717775719011') format('woff'),
       url('https://txycos.talen.top/web/flecicon/iconfont.ttf?t=1717775719011') format('truetype');
}

第二步：定义使用 iconfont 的样式

.flecicon {
  font-family: "flecicon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="flecicon">&#x33;</span>

本站图标字体（font-family）为 'flecicon'

  • 089花盆植物
    .flec-plant-fill
  • 088幻灯片
    .flec-slideshow-line
  • 087下单指向
    .flec-down-one-arrow-line
  • 083按钮对号
    .flec-circle-check-solid
  • 082按钮加号
    .flec-circle-plus-solid
  • 086按钮减号
    .flec-circle-minus-solid
  • 085按钮警示
    .flec-circle-exclamation-solid
  • 084按钮信息
    .flec-circle-info-solid
  • 081按钮右箭头
    .flec-circle-arrow-right-solid
  • 073腾讯微信
    .flec-wechat
  • 077Facebook
    .flec-facebook
  • 079Whatsapp
    .flec-whatsapp
  • 080Linkedin
    .flec-linkedin
  • 075新浪微博
    .flec-sinaweibo
  • 078Telegram
    .flec-telegram
  • 074腾讯QQ
    .flec-tencentqq
  • 076推特X
    .flec-tuitex
  • 066左双指向
    .flec-left-two-arrow-line
  • 072Algolia搜索
    .flec-algolia-fill
  • 071机器人AI
    .flec-robot
  • 070加号添加
    .flec-add-fill
  • 069即刻
    .flec-jike
  • 068加载中
    .flec-loading-line
  • 067垂直更多
    .flec-vertical-more-fill
  • 065钉子置顶
    .flec-thumbtack-solid
  • 064左单指向
    .flec-left-one-arrow-line
  • 063新窗口
    .flec-window-fill
  • 062回环链接
    .flec-links-line
  • 061云朵下载
    .flec-download-cloud-fill
  • 056暂停
    .flec-pause-fill
  • 059粘贴
    .flec-paste-fill
  • 054复制
    .flec-copy-fill
  • 055播放
    .flec-play-fill
  • 057上一个
    .flec-skip-back-fill
  • 058下一个
    .flec-skip-forward-fill
  • 051向左箭头
    .flec-arrow-left-line
  • 052向右箭头
    .flec-arrow-right-line
  • 053向上箭头
    .flec-arrow-up-line
  • 047版权协议
    .flec-copyright-line
  • 048共享协议BY
    .flec-creative-commons-by-line
  • 049共享协议NC
    .flec-creative-commons-nc-line
  • 050共享协议ND
    .flec-creative-commons-nd-line
  • 044书本教程
    .flec-book-mark-fill
  • 045星星精选
    .flec-star-smile-fill
  • 039语言简体
    .flec-jianti-line
  • 038语言繁体
    .flec-fanti-line
  • 037爱发电赞助
    .flec-afdian-line
  • 036折叠地图
    .flec-map-line
  • 035菜单三横线
    .flec-menu-line
  • 046小手赞赏
    .flec-hand-heart-fill
  • 033右单指向
    .flec-right-one-arrow-line
  • 032消息评论
    .flec-chat-fill
  • 031热度火花
    .flec-fire-fill
  • 030定位地点
    .flec-map-pin-fill
  • 029时间时钟
    .flec-time-line
  • 027日期日历
    .flec-calendar-todo-fill
  • 025眼睛张开
    .flec-visitor-fill
  • 028Word文件
    .flec-file-word-fill
  • 026三人成组
    .flec-team-fill
  • 024刷新
    .flec-refresh-line
  • 023右双指向
    .flec-right-two-arrow-line
  • 022主页房子
    .flec-home-fill
  • 020指右按钮
    .flec-right-btn-fill
  • 019关闭
    .flec-close-fill
  • 018快捷键
    .flec-keyboard-box-fill
  • 017隐藏侧栏
    .flec-side-bar-fill
  • 016开往
    .flec-train-line
  • 013随机文章
    .flec-dice-line
  • 011网址收藏
    .flec-link-fill
  • 008博客留言
    .flec-file-edit-fill
  • 041Mail图标
    .flec-mail-line
  • 012综合导航
    .flec-apps-fill
  • 043Bilibili图标
    .flec-bilibili-line
  • 060评论引用
    .flec-chat-quote-fill
  • 004即刻短文
    .flec-chat-smile-fill
  • 002全部分类
    .flec-checkbox-fill
  • 010关于本站
    .flec-contacts-fill
  • 001文章列表
    .flec-folder-fill
  • 009宝藏博主
    .flec-gift-fill
  • 042Github图标
    .flec-github-line
  • 007友情链接
    .flec-group-fill
  • 021井符标签
    .flec-hashtag-solid
  • 005时光相册
    .flec-image-fill
  • 015中控台
    .flec-layout-masonry-fill
  • 034昼夜切换
    .flec-moon-clear-fill
  • 006音乐欣赏
    .flec-music-fill
  • 003全部标签
    .flec-price-tag-fill
  • 014搜索
    .flec-search-line
  • 040广播随机
    .flec-signal-tower-fill

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：引入项目 fontclass 代码：

<link rel="stylesheet" href="https://txycos.talen.top/web/flecicon/iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="flecicon flec-xxx"></span>

本站图标字体（font-family）为 'flecicon'

  • 089花盆植物
    #flec-plant-fill
  • 088幻灯片
    #flec-slideshow-line
  • 087下单指向
    #flec-down-one-arrow-line
  • 083按钮对号
    #flec-circle-check-solid
  • 082按钮加号
    #flec-circle-plus-solid
  • 086按钮减号
    #flec-circle-minus-solid
  • 085按钮警示
    #flec-circle-exclamation-solid
  • 084按钮信息
    #flec-circle-info-solid
  • 081按钮右箭头
    #flec-circle-arrow-right-solid
  • 073腾讯微信
    #flec-wechat
  • 077Facebook
    #flec-facebook
  • 079Whatsapp
    #flec-whatsapp
  • 080Linkedin
    #flec-linkedin
  • 075新浪微博
    #flec-sinaweibo
  • 078Telegram
    #flec-telegram
  • 074腾讯QQ
    #flec-tencentqq
  • 076推特X
    #flec-tuitex
  • 066左双指向
    #flec-left-two-arrow-line
  • 072Algolia搜索
    #flec-algolia-fill
  • 071机器人AI
    #flec-robot
  • 070加号添加
    #flec-add-fill
  • 069即刻
    #flec-jike
  • 068加载中
    #flec-loading-line
  • 067垂直更多
    #flec-vertical-more-fill
  • 065钉子置顶
    #flec-thumbtack-solid
  • 064左单指向
    #flec-left-one-arrow-line
  • 063新窗口
    #flec-window-fill
  • 062回环链接
    #flec-links-line
  • 061云朵下载
    #flec-download-cloud-fill
  • 056暂停
    #flec-pause-fill
  • 059粘贴
    #flec-paste-fill
  • 054复制
    #flec-copy-fill
  • 055播放
    #flec-play-fill
  • 057上一个
    #flec-skip-back-fill
  • 058下一个
    #flec-skip-forward-fill
  • 051向左箭头
    #flec-arrow-left-line
  • 052向右箭头
    #flec-arrow-right-line
  • 053向上箭头
    #flec-arrow-up-line
  • 047版权协议
    #flec-copyright-line
  • 048共享协议BY
    #flec-creative-commons-by-line
  • 049共享协议NC
    #flec-creative-commons-nc-line
  • 050共享协议ND
    #flec-creative-commons-nd-line
  • 044书本教程
    #flec-book-mark-fill
  • 045星星精选
    #flec-star-smile-fill
  • 039语言简体
    #flec-jianti-line
  • 038语言繁体
    #flec-fanti-line
  • 037爱发电赞助
    #flec-afdian-line
  • 036折叠地图
    #flec-map-line
  • 035菜单三横线
    #flec-menu-line
  • 046小手赞赏
    #flec-hand-heart-fill
  • 033右单指向
    #flec-right-one-arrow-line
  • 032消息评论
    #flec-chat-fill
  • 031热度火花
    #flec-fire-fill
  • 030定位地点
    #flec-map-pin-fill
  • 029时间时钟
    #flec-time-line
  • 027日期日历
    #flec-calendar-todo-fill
  • 025眼睛张开
    #flec-visitor-fill
  • 028Word文件
    #flec-file-word-fill
  • 026三人成组
    #flec-team-fill
  • 024刷新
    #flec-refresh-line
  • 023右双指向
    #flec-right-two-arrow-line
  • 022主页房子
    #flec-home-fill
  • 020指右按钮
    #flec-right-btn-fill
  • 019关闭
    #flec-close-fill
  • 018快捷键
    #flec-keyboard-box-fill
  • 017隐藏侧栏
    #flec-side-bar-fill
  • 016开往
    #flec-train-line
  • 013随机文章
    #flec-dice-line
  • 011网址收藏
    #flec-link-fill
  • 008博客留言
    #flec-file-edit-fill
  • 041Mail图标
    #flec-mail-line
  • 012综合导航
    #flec-apps-fill
  • 043Bilibili图标
    #flec-bilibili-line
  • 060评论引用
    #flec-chat-quote-fill
  • 004即刻短文
    #flec-chat-smile-fill
  • 002全部分类
    #flec-checkbox-fill
  • 010关于本站
    #flec-contacts-fill
  • 001文章列表
    #flec-folder-fill
  • 009宝藏博主
    #flec-gift-fill
  • 042Github图标
    #flec-github-line
  • 007友情链接
    #flec-group-fill
  • 021井符标签
    #flec-hashtag-solid
  • 005时光相册
    #flec-image-fill
  • 015中控台
    #flec-layout-masonry-fill
  • 034昼夜切换
    #flec-moon-clear-fill
  • 006音乐欣赏
    #flec-music-fill
  • 003全部标签
    #flec-price-tag-fill
  • 014搜索
    #flec-search-line
  • 040广播随机
    #flec-signal-tower-fill

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
  • 兼容性较差，支持 IE9+，及现代浏览器。
  • 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目 symbol 代码：

<script src="https://txycos.talen.top/web/flecicon/iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#flec-xxx"></use>
</svg>