• baidu
    
  • baidu0
    
  • baidutieba
    
  • behance
    
  • behance0
    
  • diandian
    
  • douban
    
  • facebook
    
  • facebook0
    
  • flicker
    
  • fuzhilianjie
    
  • google
    
  • google0
    
  • kaixinwang
    
  • kaixinwang0
    
  • kongjian
    
  • kongjian0
    
  • linkedin
    
  • linkedin0
    
  • meilishuo
    
  • pengyouquan
    
  • pengyouquan0
    
  • pengyouquanyin
    
  • pengyouquanyin0
    
  • pinterest
    
  • pinterest0
    
  • qq
    
  • qq0
    
  • renren
    
  • renren0
    
  • sina
    
  • sina0
    
  • taobao
    
  • taobaoyin
    
  • tianya
    
  • tianya0
    
  • twitter
    
  • twitter0
    
  • wangwang
    
  • wangyi
    
  • wangyi0
    
  • weibo
    
  • weiboo
    
  • weixin
    
  • weixin0
    
  • xin
    
  • yixin
    
  • yixin0
    
  • youjian
    
  • youjian0
    
  • zhifubao
    
  • zhifubao0
    
  • zhihu
    
  • tieba0
    
  • zhihu0
    
  • douban0
    
  • evernote-fill
    
  • evernote-line
    
  • reddit-line
    
  • dingding-fill
    
  • dingding-line
    
  • github-fill
    
  • paypal-fill
    
  • windows-fill
    
  • 类目 品类 分类 类别.2
    
  • 分类cur
    
  • 分类2-01
    
  • 分类
    
  • 未选中圆圈
    
  • 圆形未选中
    
  • 
  • 
  • 下拉
    
  • arrow drop down
    
  • 下拉
    
  • 关闭
    
  • close
    
  • close
    
  • close
    
  • close
    
  • 广播
    
  • 搜索
    
  • 搜索
    
  • 搜索
    
  • Home
    
  • home
    
  • home
    
  • home
    
  • 主页
    
  • 进度
    
  • book
    
  • 进度
    
  • 进度
    
  • 进度
    
  • 进度
    
  • book
    
  • icon_阅读时间
    
  • 评级星(全星)
    
  • 评级星(线条)
    
  • 评级星(半星)
    
  • 文字
    
  • 文字
    
  • 文字
    
  • 文字
    
  • 咖啡
    
  • 文字
    
  • M_图片转文字
    
  • 设置
    
  • 设 置
    
  • 设置
    
  • 二维码
    
  • 二维码
    
  • logo
    
  • miaojie_1029_logo
    
  • csdn
    
  • logo
    
  • BILIBILI_LOGO
    
  • logo-bitcoin
    
  • logo-css3
    
  • logo-npm
    
  • logo-skype
    
  • logo
    
  • logo-tux
    
  • logo-twitter
    
  • logo-twitch
    
  • logo-pinterest
    
  • logo-tumblr
    
  • logo-reddit
    
  • logo-steam
    
  • G, google. logo
    
  • logo-closed-captioning
    
  • logo-linkedin
    
  • logo-xbox
    
  • logo-apple
    
  • social-1_logo-blogger
    
  • social-1_logo-behance
    
  • social-1_logo-500px
    
  • social-1_logo-dropbox
    
  • social-1_logo-creative-market
    
  • social-1_logo-codepen
    
  • social-1_logo-evernote
    
  • social-1_logo-instagram
    
  • social-1_logo-google-plus
    
  • social-1_logo-paypal
    
  • social-1_logo-reddit
    
  • social-1_logo-linkedin
    
  • social-1_logo-deviantart
    
  • social-1_logo-rss
    
  • social-1_logo-skype
    
  • social-1_logo-soundcloud
    
  • social-1_logo-tumblr
    
  • social-1_logo-slack
    
  • social-1_logo-youtube
    
  • social-1_logo-wordpress
    
  • logo-markdown
    
  • logo-python
    
  • logo-nodejs
    
  • logo-facebook
    
  • logo-octocat
    
  • logo_ie
    
  • logo_QQ
    
  • logo_gitlab
    
  • logo_dingding
    
  • logo_weibo_circle
    
  • 四川天府银行logo
    
  • logo-wechat
    
  • blog-solid
    
  • gitee
    
  • 我关注的品牌
    
  • 收藏-选中
    
  • 亲密付
    
  • 朋友-fill
    
  • 收藏2
    
  • 喜欢2
    
  • cnblogs
    
  • 腾讯云
    
  • 认证徽章
    
  • 签字审核
    
  • 纸飞机
    
  • group_fill
    
  • setup_fill
    
  • gitee
    
  • gitlab
    
  • github
    
  • blogs
    
  • 大众-评论
    
  • 评论
    
  • 评论
    
  • 评论
    
  • 评论
    
  • 评论
    
  • 目录
    
  • 目录
    
  • 目录
    
  • 公众号 任意一个达到25px
    
  • 我打赏的人
    
  • 公众号
    
  • 公众号二维码
    
  • 公众号
    
  • 打赏1
    
  • 打赏
    
  • 活动管理-打赏功能
    
  • 公众号
    
  • bad
    
  • good
    
  • hot
    
  • 心率
    
  • 爱心
    
  • 未标题-22
    
  • QRcode
    
  • menudots
    
  • 
  • 悬赏
    
  • interactive
    
  • browse
    
  • time
    
  • 对号
    
  • 评论组
    
  • 选择展开
    
  • 展开
    
  • 展开
    
  • energy
    
  • addressbook_fill
    
  • barrage_fill
    
  • brush_fill
    
  • computer_fill
    
  • createtask_fill
    
  • dynamic_fill
    
  • emoji_fill
    
  • enterinto_fill
    
  • flag_fill
    
  • flashlight_fill
    
  • headlines_fill
    
  • homepage_fill
    
  • interactive_fill
    
  • mine_fill
    
  • picture_fill
    
  • play_fill
    
  • prompt_fill
    
  • redpacket_fill
    
  • remind_fill
    
  • smallscreen_fill
    
  • stealth_fill
    
  • tasklist_fill
    
  • trash_fill
    
  • video_fill
    
  • warning_fill
    
  • search fill
    
  • financial_fill
    
  • int_fill
    
  • 闪电
    
  • 闪电
    
  • 闪电
    
  • code
    
  • code
    
  • code
    
  • code
    
  • activity_fill
    
  • document_fill
    
  • task_fill
    
  • browse_fill
    
  • collection_fill
    
  • label_fill
    
  • like_fill
    
  • praise_fill
    
  • select_fill
    
  • time_fill
    
  • marketing_fill
    
  • 复制
    
  • 复制
    
  • 复制文件
    
  • 复制
    
  • 复制
    
  • 
  • 
  • 点赞
    
  • icon-未关注
    
  • icon-已关注
    
  • 点赞
    
  • odps-data
    
  • 返回
    
  • 置顶
    
  • time_fill
    
  • time
    
  • like_fill
    
  • like
    
  • tag_fill
    
  • tag
    

Unicode 引用


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

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

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1665228142248') format('woff2'),
       url('iconfont.woff?t=1665228142248') format('woff'),
       url('iconfont.ttf?t=1665228142248') format('truetype');
}

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

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

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

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

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • baidu
    .icon-baidu
  • baidu0
    .icon-baidu0
  • baidutieba
    .icon-baidutieba
  • behance
    .icon-behance
  • behance0
    .icon-behance0
  • diandian
    .icon-diandian
  • douban
    .icon-douban
  • facebook
    .icon-facebook
  • facebook0
    .icon-facebook0
  • flicker
    .icon-flicker
  • fuzhilianjie
    .icon-fuzhilianjie
  • google
    .icon-google
  • google0
    .icon-google0
  • kaixinwang
    .icon-kaixinwang
  • kaixinwang0
    .icon-kaixinwang0
  • kongjian
    .icon-kongjian
  • kongjian0
    .icon-kongjian0
  • linkedin
    .icon-linkedin
  • linkedin0
    .icon-linkedin0
  • meilishuo
    .icon-meilishuo
  • pengyouquan
    .icon-pengyouquan
  • pengyouquan0
    .icon-pengyouquan0
  • pengyouquanyin
    .icon-pengyouquanyin
  • pengyouquanyin0
    .icon-pengyouquanyin0
  • pinterest
    .icon-pinterest
  • pinterest0
    .icon-pinterest0
  • qq
    .icon-qq
  • qq0
    .icon-qq0
  • renren
    .icon-renren
  • renren0
    .icon-renren0
  • sina
    .icon-sina
  • sina0
    .icon-sina0
  • taobao
    .icon-taobao
  • taobaoyin
    .icon-taobaoyin
  • tianya
    .icon-tianya
  • tianya0
    .icon-tianya0
  • twitter
    .icon-twitter
  • twitter0
    .icon-twitter0
  • wangwang
    .icon-wangwang
  • wangyi
    .icon-wangyi
  • wangyi0
    .icon-wangyi0
  • weibo
    .icon-weibo
  • weiboo
    .icon-weiboo
  • weixin
    .icon-weixin
  • weixin0
    .icon-weixin0
  • xin
    .icon-xin
  • yixin
    .icon-yixin
  • yixin0
    .icon-yixin0
  • youjian
    .icon-youjian
  • youjian0
    .icon-youjian0
  • zhifubao
    .icon-zhifubao
  • zhifubao0
    .icon-zhifubao0
  • zhihu
    .icon-zhihu
  • tieba0
    .icon-tieba0
  • zhihu0
    .icon-zhihu0
  • douban0
    .icon-douban0
  • evernote-fill
    .icon-evernote-fill
  • evernote-line
    .icon-evernote-line
  • reddit-line
    .icon-reddit-line
  • dingding-fill
    .icon-dingding-fill
  • dingding-line
    .icon-dingding-line
  • github-fill
    .icon-github-fill
  • paypal-fill
    .icon-paypal-fill
  • windows-fill
    .icon-windows-fill
  • 类目 品类 分类 类别.2
    .icon-leimupinleifenleileibie2
  • 分类cur
    .icon-fenleicur
  • 分类2-01
    .icon-fenlei201
  • 分类
    .icon-fenlei
  • 未选中圆圈
    .icon-weixuanzhongyuanquan
  • 圆形未选中
    .icon-yuanxingweixuanzhong
  • .icon-yuan
  • .icon-yuan1
  • 下拉
    .icon-arrow-down
  • arrow drop down
    .icon-arrow-right
  • 下拉
    .icon-xiala
  • 关闭
    .icon-close
  • close
    .icon-close-mini
  • close
    .icon-close1
  • close
    .icon-close2
  • close
    .icon-close3
  • 广播
    .icon-guangbo
  • 搜索
    .icon-sousuo1
  • 搜索
    .icon-sousuo2
  • 搜索
    .icon-sousuo3
  • Home
    .icon-home
  • home
    .icon-home1
  • home
    .icon-home2
  • home
    .icon-home4
  • 主页
    .icon-geren1
  • 进度
    .icon-jindu
  • book
    .icon-book
  • 进度
    .icon-jindu1
  • 进度
    .icon-schedule
  • 进度
    .icon-jindu2
  • 进度
    .icon-jindu3
  • book
    .icon-7777
  • icon_阅读时间
    .icon-icon_yuedushijian
  • 评级星(全星)
    .icon-pingjixingquanxing
  • 评级星(线条)
    .icon-pingjixingxiantiao
  • 评级星(半星)
    .icon-pingjixingbanxing
  • 文字
    .icon-wenzi2
  • 文字
    .icon-wenzi3
  • 文字
    .icon-wenzi4
  • 文字
    .icon-wenzi
  • 咖啡
    .icon-shangwutubiao-
  • 文字
    .icon-Font_Linear
  • M_图片转文字
    .icon-M_tupianzhuanwenzi
  • 设置
    .icon-shezhi2
  • 设 置
    .icon-shezhi3
  • 设置
    .icon-shezhi4
  • 二维码
    .icon-ico
  • 二维码
    .icon-erweima4
  • logo
    .icon-logo
  • miaojie_1029_logo
    .icon-miaojie1029logo
  • csdn
    .icon-csdn
  • logo
    .icon-logo1
  • BILIBILI_LOGO
    .icon-bilibili
  • logo-bitcoin
    .icon-logo-bitcoin
  • logo-css3
    .icon-logo-css
  • logo-npm
    .icon-logo-npm
  • logo-skype
    .icon-logo-skype
  • logo
    .icon-budaidise
  • logo-tux
    .icon-logo-tux
  • logo-twitter
    .icon-logo-twitter
  • logo-twitch
    .icon-logo-twitch
  • logo-pinterest
    .icon-logo-pinterest
  • logo-tumblr
    .icon-logo-tumblr
  • logo-reddit
    .icon-logo-reddit
  • logo-steam
    .icon-logo-steam
  • G, google. logo
    .icon-Ggooglelogo
  • logo-closed-captioning
    .icon-logo-closed-captioning
  • logo-linkedin
    .icon-logo-linkedin
  • logo-xbox
    .icon-logo-xbox
  • logo-apple
    .icon-logo-apple
  • social-1_logo-blogger
    .icon-social-_logo-blogger
  • social-1_logo-behance
    .icon-social-_logo-behance
  • social-1_logo-500px
    .icon-social-_logo-px
  • social-1_logo-dropbox
    .icon-social-_logo-dropbox
  • social-1_logo-creative-market
    .icon-social-_logo-creative-market
  • social-1_logo-codepen
    .icon-social-_logo-codepen
  • social-1_logo-evernote
    .icon-social-_logo-evernote
  • social-1_logo-instagram
    .icon-social-_logo-instagram
  • social-1_logo-google-plus
    .icon-social-_logo-google-plus
  • social-1_logo-paypal
    .icon-social-_logo-paypal
  • social-1_logo-reddit
    .icon-social-_logo-reddit
  • social-1_logo-linkedin
    .icon-social-_logo-linkedin
  • social-1_logo-deviantart
    .icon-social-_logo-deviantart
  • social-1_logo-rss
    .icon-social-_logo-rss
  • social-1_logo-skype
    .icon-social-_logo-skype
  • social-1_logo-soundcloud
    .icon-social-_logo-soundcloud
  • social-1_logo-tumblr
    .icon-social-_logo-tumblr
  • social-1_logo-slack
    .icon-social-_logo-slack
  • social-1_logo-youtube
    .icon-social-_logo-youtube
  • social-1_logo-wordpress
    .icon-social-_logo-wordpress
  • logo-markdown
    .icon-logo-markdown
  • logo-python
    .icon-logo-python
  • logo-nodejs
    .icon-logo-nodejs
  • logo-facebook
    .icon-logo-facebook
  • logo-octocat
    .icon-logo-octocat
  • logo_ie
    .icon-logo_ie
  • logo_QQ
    .icon-logo_QQ
  • logo_gitlab
    .icon-logo_gitlab
  • logo_dingding
    .icon-logo_dingding
  • logo_weibo_circle
    .icon-logo_weibo_circle
  • 四川天府银行logo
    .icon-sichuantianfuyinhanglogo
  • logo-wechat
    .icon-logo-wechat
  • blog-solid
    .icon-blog-solid
  • gitee
    .icon-gitee1
  • 我关注的品牌
    .icon-woguanzhudepinpai
  • 收藏-选中
    .icon-shoucangxuanzhong
  • 亲密付
    .icon-qinmifu
  • 朋友-fill
    .icon-pengyoufill
  • 收藏2
    .icon-shoucang
  • 喜欢2
    .icon-xihuan
  • cnblogs
    .icon-cnblogs
  • 腾讯云
    .icon-tengxunyun
  • 认证徽章
    .icon-renzhenghuizhang
  • 签字审核
    .icon-qianzishenhe
  • 纸飞机
    .icon-zhifeiji
  • group_fill
    .icon-group_fill
  • setup_fill
    .icon-setup_fill
  • gitee
    .icon-gitee
  • gitlab
    .icon-gitlab
  • github
    .icon-github
  • blogs
    .icon-blogs
  • 大众-评论
    .icon-dazhongicon04
  • 评论
    .icon-pinglun
  • 评论
    .icon-pinglun1
  • 评论
    .icon-pinglun2
  • 评论
    .icon-pinglun3
  • 评论
    .icon-pinglun4
  • 目录
    .icon-huaban
  • 目录
    .icon-mulu
  • 目录
    .icon-mulu5
  • 公众号 任意一个达到25px
    .icon-gongzhonghao
  • 我打赏的人
    .icon-wodashangderen
  • 公众号
    .icon-gongzhonghao_
  • 公众号二维码
    .icon-gongzhonghaoerweima
  • 公众号
    .icon-gongzhonghao1
  • 打赏1
    .icon-dashang1
  • 打赏
    .icon-dashang2
  • 活动管理-打赏功能
    .icon-huodongguanli-dashanggongneng
  • 公众号
    .icon-gongzhonghao2
  • bad
    .icon-bad
  • good
    .icon-good
  • hot
    .icon-hot
  • 心率
    .icon-xl
  • 爱心
    .icon-aixin
  • 未标题-22
    .icon-weibiaoti22
  • QRcode
    .icon-QRcode
  • menudots
    .icon-menudots
  • .icon-shang
  • 悬赏
    .icon-xuanshang
  • interactive
    .icon-interactive
  • browse
    .icon-browse
  • time
    .icon-time1
  • 对号
    .icon-right
  • 评论组
    .icon-pinglunzu
  • 选择展开
    .icon-select
  • 展开
    .icon-xiala-copy
  • 展开
    .icon-xiala-copy-copy
  • energy
    .icon-zhtn
  • addressbook_fill
    .icon-addressbook_fill
  • barrage_fill
    .icon-barrage_fill
  • brush_fill
    .icon-brush_fill
  • computer_fill
    .icon-computer_fill
  • createtask_fill
    .icon-createtask_fill
  • dynamic_fill
    .icon-dynamic_fill
  • emoji_fill
    .icon-emoji_fill
  • enterinto_fill
    .icon-enterinto_fill
  • flag_fill
    .icon-flag_fill
  • flashlight_fill
    .icon-flashlight_fill
  • headlines_fill
    .icon-headlines_fill
  • homepage_fill
    .icon-homepage_fill
  • interactive_fill
    .icon-interactive_fill
  • mine_fill
    .icon-mine_fill
  • picture_fill
    .icon-picture_fill
  • play_fill
    .icon-play_fill
  • prompt_fill
    .icon-prompt_fill
  • redpacket_fill
    .icon-redpacket_fill
  • remind_fill
    .icon-remind_fill
  • smallscreen_fill
    .icon-smallscreen_fill
  • stealth_fill
    .icon-stealth_fill
  • tasklist_fill
    .icon-tasklist_fill
  • trash_fill
    .icon-trash_fill
  • video_fill
    .icon-video_fill
  • warning_fill
    .icon-warning_fill
  • search fill
    .icon-searchfill
  • financial_fill
    .icon-financial_fill
  • int_fill
    .icon-int
  • 闪电
    .icon-lighting
  • 闪电
    .icon-shandian
  • 闪电
    .icon-shandian2
  • code
    .icon-code1
  • code
    .icon-code3
  • code
    .icon-code4
  • code
    .icon-code5
  • activity_fill
    .icon-activity_fill
  • document_fill
    .icon-document_fill
  • task_fill
    .icon-task_fill
  • browse_fill
    .icon-browse_fill
  • collection_fill
    .icon-collection_fill
  • label_fill
    .icon-label_fill
  • like_fill
    .icon-like_fill
  • praise_fill
    .icon-praise_fill
  • select_fill
    .icon-select_fill
  • time_fill
    .icon-time_fill
  • marketing_fill
    .icon-marketing_fill
  • 复制
    .icon-fuzhi
  • 复制
    .icon-fuzhi1
  • 复制文件
    .icon-icon02
  • 复制
    .icon-fuzhi2
  • 复制
    .icon-fuzhi3
  • .icon-buzan
  • .icon-zan1
  • 点赞
    .icon-dianzan
  • icon-未关注
    .icon-iconweiguanzhu
  • icon-已关注
    .icon-iconyiguanzhu
  • 点赞
    .icon-dianzan1
  • odps-data
    .icon-odps-data
  • 返回
    .icon-fanhui
  • 置顶
    .icon-zhiding
  • time_fill
    .icon-timefill
  • time
    .icon-time
  • like_fill
    .icon-likefill
  • like
    .icon-like
  • tag_fill
    .icon-tagfill
  • tag
    .icon-tag

font-class 引用


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

与 Unicode 使用方式相比,具有如下特点:

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

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

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

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • baidu
    #icon-baidu
  • baidu0
    #icon-baidu0
  • baidutieba
    #icon-baidutieba
  • behance
    #icon-behance
  • behance0
    #icon-behance0
  • diandian
    #icon-diandian
  • douban
    #icon-douban
  • facebook
    #icon-facebook
  • facebook0
    #icon-facebook0
  • flicker
    #icon-flicker
  • fuzhilianjie
    #icon-fuzhilianjie
  • google
    #icon-google
  • google0
    #icon-google0
  • kaixinwang
    #icon-kaixinwang
  • kaixinwang0
    #icon-kaixinwang0
  • kongjian
    #icon-kongjian
  • kongjian0
    #icon-kongjian0
  • linkedin
    #icon-linkedin
  • linkedin0
    #icon-linkedin0
  • meilishuo
    #icon-meilishuo
  • pengyouquan
    #icon-pengyouquan
  • pengyouquan0
    #icon-pengyouquan0
  • pengyouquanyin
    #icon-pengyouquanyin
  • pengyouquanyin0
    #icon-pengyouquanyin0
  • pinterest
    #icon-pinterest
  • pinterest0
    #icon-pinterest0
  • qq
    #icon-qq
  • qq0
    #icon-qq0
  • renren
    #icon-renren
  • renren0
    #icon-renren0
  • sina
    #icon-sina
  • sina0
    #icon-sina0
  • taobao
    #icon-taobao
  • taobaoyin
    #icon-taobaoyin
  • tianya
    #icon-tianya
  • tianya0
    #icon-tianya0
  • twitter
    #icon-twitter
  • twitter0
    #icon-twitter0
  • wangwang
    #icon-wangwang
  • wangyi
    #icon-wangyi
  • wangyi0
    #icon-wangyi0
  • weibo
    #icon-weibo
  • weiboo
    #icon-weiboo
  • weixin
    #icon-weixin
  • weixin0
    #icon-weixin0
  • xin
    #icon-xin
  • yixin
    #icon-yixin
  • yixin0
    #icon-yixin0
  • youjian
    #icon-youjian
  • youjian0
    #icon-youjian0
  • zhifubao
    #icon-zhifubao
  • zhifubao0
    #icon-zhifubao0
  • zhihu
    #icon-zhihu
  • tieba0
    #icon-tieba0
  • zhihu0
    #icon-zhihu0
  • douban0
    #icon-douban0
  • evernote-fill
    #icon-evernote-fill
  • evernote-line
    #icon-evernote-line
  • reddit-line
    #icon-reddit-line
  • dingding-fill
    #icon-dingding-fill
  • dingding-line
    #icon-dingding-line
  • github-fill
    #icon-github-fill
  • paypal-fill
    #icon-paypal-fill
  • windows-fill
    #icon-windows-fill
  • 类目 品类 分类 类别.2
    #icon-leimupinleifenleileibie2
  • 分类cur
    #icon-fenleicur
  • 分类2-01
    #icon-fenlei201
  • 分类
    #icon-fenlei
  • 未选中圆圈
    #icon-weixuanzhongyuanquan
  • 圆形未选中
    #icon-yuanxingweixuanzhong
  • #icon-yuan
  • #icon-yuan1
  • 下拉
    #icon-arrow-down
  • arrow drop down
    #icon-arrow-right
  • 下拉
    #icon-xiala
  • 关闭
    #icon-close
  • close
    #icon-close-mini
  • close
    #icon-close1
  • close
    #icon-close2
  • close
    #icon-close3
  • 广播
    #icon-guangbo
  • 搜索
    #icon-sousuo1
  • 搜索
    #icon-sousuo2
  • 搜索
    #icon-sousuo3
  • Home
    #icon-home
  • home
    #icon-home1
  • home
    #icon-home2
  • home
    #icon-home4
  • 主页
    #icon-geren1
  • 进度
    #icon-jindu
  • book
    #icon-book
  • 进度
    #icon-jindu1
  • 进度
    #icon-schedule
  • 进度
    #icon-jindu2
  • 进度
    #icon-jindu3
  • book
    #icon-7777
  • icon_阅读时间
    #icon-icon_yuedushijian
  • 评级星(全星)
    #icon-pingjixingquanxing
  • 评级星(线条)
    #icon-pingjixingxiantiao
  • 评级星(半星)
    #icon-pingjixingbanxing
  • 文字
    #icon-wenzi2
  • 文字
    #icon-wenzi3
  • 文字
    #icon-wenzi4
  • 文字
    #icon-wenzi
  • 咖啡
    #icon-shangwutubiao-
  • 文字
    #icon-Font_Linear
  • M_图片转文字
    #icon-M_tupianzhuanwenzi
  • 设置
    #icon-shezhi2
  • 设 置
    #icon-shezhi3
  • 设置
    #icon-shezhi4
  • 二维码
    #icon-ico
  • 二维码
    #icon-erweima4
  • logo
    #icon-logo
  • miaojie_1029_logo
    #icon-miaojie1029logo
  • csdn
    #icon-csdn
  • logo
    #icon-logo1
  • BILIBILI_LOGO
    #icon-bilibili
  • logo-bitcoin
    #icon-logo-bitcoin
  • logo-css3
    #icon-logo-css
  • logo-npm
    #icon-logo-npm
  • logo-skype
    #icon-logo-skype
  • logo
    #icon-budaidise
  • logo-tux
    #icon-logo-tux
  • logo-twitter
    #icon-logo-twitter
  • logo-twitch
    #icon-logo-twitch
  • logo-pinterest
    #icon-logo-pinterest
  • logo-tumblr
    #icon-logo-tumblr
  • logo-reddit
    #icon-logo-reddit
  • logo-steam
    #icon-logo-steam
  • G, google. logo
    #icon-Ggooglelogo
  • logo-closed-captioning
    #icon-logo-closed-captioning
  • logo-linkedin
    #icon-logo-linkedin
  • logo-xbox
    #icon-logo-xbox
  • logo-apple
    #icon-logo-apple
  • social-1_logo-blogger
    #icon-social-_logo-blogger
  • social-1_logo-behance
    #icon-social-_logo-behance
  • social-1_logo-500px
    #icon-social-_logo-px
  • social-1_logo-dropbox
    #icon-social-_logo-dropbox
  • social-1_logo-creative-market
    #icon-social-_logo-creative-market
  • social-1_logo-codepen
    #icon-social-_logo-codepen
  • social-1_logo-evernote
    #icon-social-_logo-evernote
  • social-1_logo-instagram
    #icon-social-_logo-instagram
  • social-1_logo-google-plus
    #icon-social-_logo-google-plus
  • social-1_logo-paypal
    #icon-social-_logo-paypal
  • social-1_logo-reddit
    #icon-social-_logo-reddit
  • social-1_logo-linkedin
    #icon-social-_logo-linkedin
  • social-1_logo-deviantart
    #icon-social-_logo-deviantart
  • social-1_logo-rss
    #icon-social-_logo-rss
  • social-1_logo-skype
    #icon-social-_logo-skype
  • social-1_logo-soundcloud
    #icon-social-_logo-soundcloud
  • social-1_logo-tumblr
    #icon-social-_logo-tumblr
  • social-1_logo-slack
    #icon-social-_logo-slack
  • social-1_logo-youtube
    #icon-social-_logo-youtube
  • social-1_logo-wordpress
    #icon-social-_logo-wordpress
  • logo-markdown
    #icon-logo-markdown
  • logo-python
    #icon-logo-python
  • logo-nodejs
    #icon-logo-nodejs
  • logo-facebook
    #icon-logo-facebook
  • logo-octocat
    #icon-logo-octocat
  • logo_ie
    #icon-logo_ie
  • logo_QQ
    #icon-logo_QQ
  • logo_gitlab
    #icon-logo_gitlab
  • logo_dingding
    #icon-logo_dingding
  • logo_weibo_circle
    #icon-logo_weibo_circle
  • 四川天府银行logo
    #icon-sichuantianfuyinhanglogo
  • logo-wechat
    #icon-logo-wechat
  • blog-solid
    #icon-blog-solid
  • gitee
    #icon-gitee1
  • 我关注的品牌
    #icon-woguanzhudepinpai
  • 收藏-选中
    #icon-shoucangxuanzhong
  • 亲密付
    #icon-qinmifu
  • 朋友-fill
    #icon-pengyoufill
  • 收藏2
    #icon-shoucang
  • 喜欢2
    #icon-xihuan
  • cnblogs
    #icon-cnblogs
  • 腾讯云
    #icon-tengxunyun
  • 认证徽章
    #icon-renzhenghuizhang
  • 签字审核
    #icon-qianzishenhe
  • 纸飞机
    #icon-zhifeiji
  • group_fill
    #icon-group_fill
  • setup_fill
    #icon-setup_fill
  • gitee
    #icon-gitee
  • gitlab
    #icon-gitlab
  • github
    #icon-github
  • blogs
    #icon-blogs
  • 大众-评论
    #icon-dazhongicon04
  • 评论
    #icon-pinglun
  • 评论
    #icon-pinglun1
  • 评论
    #icon-pinglun2
  • 评论
    #icon-pinglun3
  • 评论
    #icon-pinglun4
  • 目录
    #icon-huaban
  • 目录
    #icon-mulu
  • 目录
    #icon-mulu5
  • 公众号 任意一个达到25px
    #icon-gongzhonghao
  • 我打赏的人
    #icon-wodashangderen
  • 公众号
    #icon-gongzhonghao_
  • 公众号二维码
    #icon-gongzhonghaoerweima
  • 公众号
    #icon-gongzhonghao1
  • 打赏1
    #icon-dashang1
  • 打赏
    #icon-dashang2
  • 活动管理-打赏功能
    #icon-huodongguanli-dashanggongneng
  • 公众号
    #icon-gongzhonghao2
  • bad
    #icon-bad
  • good
    #icon-good
  • hot
    #icon-hot
  • 心率
    #icon-xl
  • 爱心
    #icon-aixin
  • 未标题-22
    #icon-weibiaoti22
  • QRcode
    #icon-QRcode
  • menudots
    #icon-menudots
  • #icon-shang
  • 悬赏
    #icon-xuanshang
  • interactive
    #icon-interactive
  • browse
    #icon-browse
  • time
    #icon-time1
  • 对号
    #icon-right
  • 评论组
    #icon-pinglunzu
  • 选择展开
    #icon-select
  • 展开
    #icon-xiala-copy
  • 展开
    #icon-xiala-copy-copy
  • energy
    #icon-zhtn
  • addressbook_fill
    #icon-addressbook_fill
  • barrage_fill
    #icon-barrage_fill
  • brush_fill
    #icon-brush_fill
  • computer_fill
    #icon-computer_fill
  • createtask_fill
    #icon-createtask_fill
  • dynamic_fill
    #icon-dynamic_fill
  • emoji_fill
    #icon-emoji_fill
  • enterinto_fill
    #icon-enterinto_fill
  • flag_fill
    #icon-flag_fill
  • flashlight_fill
    #icon-flashlight_fill
  • headlines_fill
    #icon-headlines_fill
  • homepage_fill
    #icon-homepage_fill
  • interactive_fill
    #icon-interactive_fill
  • mine_fill
    #icon-mine_fill
  • picture_fill
    #icon-picture_fill
  • play_fill
    #icon-play_fill
  • prompt_fill
    #icon-prompt_fill
  • redpacket_fill
    #icon-redpacket_fill
  • remind_fill
    #icon-remind_fill
  • smallscreen_fill
    #icon-smallscreen_fill
  • stealth_fill
    #icon-stealth_fill
  • tasklist_fill
    #icon-tasklist_fill
  • trash_fill
    #icon-trash_fill
  • video_fill
    #icon-video_fill
  • warning_fill
    #icon-warning_fill
  • search fill
    #icon-searchfill
  • financial_fill
    #icon-financial_fill
  • int_fill
    #icon-int
  • 闪电
    #icon-lighting
  • 闪电
    #icon-shandian
  • 闪电
    #icon-shandian2
  • code
    #icon-code1
  • code
    #icon-code3
  • code
    #icon-code4
  • code
    #icon-code5
  • activity_fill
    #icon-activity_fill
  • document_fill
    #icon-document_fill
  • task_fill
    #icon-task_fill
  • browse_fill
    #icon-browse_fill
  • collection_fill
    #icon-collection_fill
  • label_fill
    #icon-label_fill
  • like_fill
    #icon-like_fill
  • praise_fill
    #icon-praise_fill
  • select_fill
    #icon-select_fill
  • time_fill
    #icon-time_fill
  • marketing_fill
    #icon-marketing_fill
  • 复制
    #icon-fuzhi
  • 复制
    #icon-fuzhi1
  • 复制文件
    #icon-icon02
  • 复制
    #icon-fuzhi2
  • 复制
    #icon-fuzhi3
  • #icon-buzan
  • #icon-zan1
  • 点赞
    #icon-dianzan
  • icon-未关注
    #icon-iconweiguanzhu
  • icon-已关注
    #icon-iconyiguanzhu
  • 点赞
    #icon-dianzan1
  • odps-data
    #icon-odps-data
  • 返回
    #icon-fanhui
  • 置顶
    #icon-zhiding
  • time_fill
    #icon-timefill
  • time
    #icon-time
  • like_fill
    #icon-likefill
  • like
    #icon-like
  • tag_fill
    #icon-tagfill
  • tag
    #icon-tag

Symbol 引用


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

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

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./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="#icon-xxx"></use>
</svg>