• address
    
  • bluetooth off
    
  • bluetoothon
    
  • camera
    
  • course
    
  • bluetooth_link
    
  • addto
    
  • child
    
  • audio
    
  • delete
    
  • DND_mode
    
  • edit
    
  • child2
    
  • settings
    
  • bluray
    
  • cancel
    
  • down
    
  • brightness
    
  • musiclist
    
  • home
    
  • favoriteslist
    
  • loop
    
  • nextsong
    
  • bottom
    
  • guarantee
    
  • agreement
    
  • prevent
    
  • privacy2
    
  • play
    
  • brightness2
    
  • privac_open
    
  • conversation
    
  • information
    
  • answer
    
  • face
    
  • protect
    
  • close
    
  • nosignal
    
  • refuse
    
  • selection
    
  • previous
    
  • Privacy
    
  • increase
    
  • music
    
  • save
    
  • singlecycle
    
  • prompt
    
  • Incoming_call
    
  • layered
    
  • collection
    
  • soundsize
    
  • upward
    
  • vision
    
  • top
    
  • history
    
  • shopping
    
  • turnvoice
    
  • locking
    
  • restore
    
  • night
    
  • safety
    
  • phone
    
  • relationship
    
  • next
    
  • timeout
    
  • video1
    
  • refresh
    
  • visible
    
  • telephone
    
  • th_internet
    
  • callout
    
  • withdraw
    
  • call
    
  • video2
    
  • hangup
    
  • mute
    
  • eye_protection
    
  • distance
    
  • voice
    
  • nickname
    
  • return
    
  • payment
    
  • privacy_closed
    
  • movie
    
  • wifi
    
  • random
    
  • problem
    
  • 右箭头
    
  • 下箭头
    
  • 左箭头
    
  • 苹果
    
  • 右箭头
    
  • 附件
    
  • 安卓
    
  • 退格
    
  • 苹果
    
  • 退格
    
  • 左箭头
    
  • 附件
    
  • 文件-音频
    
  • 购物篮
    
  • 购物篮
    
  • 保证金
    
  • 小车
    
  • 小车
    
  • 下箭头
    
  • 交换
    
  • 保证金
    
  • 柱状图
    
  • 交换
    
  • 上箭头
    
  • 柱状图
    
  • 对话
    
  • 饼图
    
  • 饼图
    
  • 对话
    
  • 多选框-选中
    
  • 闹钟
    
  • 
  • 多选框
    
  • 通讯录
    
  • 公文包
    
  • 闹钟
    
  • 电脑
    
  • 电脑
    
  • 
  • 公文包
    
  • 合同
    
  • 通讯录
    
  • 合同
    
  • 合同
    
  • 
  • 日志
    
  • 合同
    
  • 
  • 日志
    
  • 下载
    
  • 编辑2
    
  • 书本
    
  • 文件-word
    
  • 删除
    
  • 删除
    
  • facebook
    
  • 编辑2
    
  • 
  • 下载
    
  • 编辑
    
  • 编辑
    
  • 书本
    
  • 上箭头
    
  • 编辑3
    
  • facebook
    
  • 邮件
    
  • 编辑3
    
  • 文件
    
  • 文件-exl
    
  • 邮件
    
  • 文件
    
  • 收藏
    
  • 传真
    
  • 传真
    
  • 收藏
    
  • 筛选
    
  • 旗帜
    
  • 筛选
    
  • 全屏2
    
  • 
  • 文件夹
    
  • 全屏
    
  • 全屏
    
  • 全屏2
    
  • 旗帜
    
  • 团队
    
  • 握手
    
  • 帮助
    
  • 证件
    
  • ipad
    
  • 证件
    
  • 房子
    
  • 文件夹
    
  • 首页
    
  • 布局
    
  • 钥匙
    
  • 布局
    
  • 首页
    
  • 帮助
    
  • 喜欢
    
  • ipad
    
  • 钥匙
    
  • 房子
    
  • 链接
    
  • 
  • linkedin
    
  • 链接
    
  • 奖牌
    
  • 奖牌
    
  • 菜单
    
  • 
  • 文件-其他
    
  • 消息
    
  • 我的
    
  • 公告
    
  • 朋友圈
    
  • 更多
    
  • 公告
    
  • 握手
    
  • linkedin
    
  • 经理
    
  • 照片
    
  • 经理
    
  • 手机
    
  • 消息
    
  • 文件-图片
    
  • 手机
    
  • 文件-pdf
    
  • 更多
    
  • 笔尺
    
  • 笔尺
    
  • 文件-ppt
    
  • 地点
    
  • 地点
    
  • 二维码
    
  • 喜欢
    
  • 单选框-选中
    
  • 单选框
    
  • 团队
    
  • 菜单
    
  • 文件-压缩包
    
  • 尺子
    
  • 照片
    
  • 搜索
    
  • 尺子
    
  • 客服
    
  • 搜索
    
  • 设置
    
  • 公章
    
  • 演示
    
  • QQ空间
    
  • 我的
    
  • 分享
    
  • 客服
    
  • 公章
    
  • 演示
    
  • 分享
    
  • 提交2
    
  • 三角尺
    
  • 皮肤
    
  • 提交
    
  • 提交
    
  • 标签
    
  • 提交2
    
  • 电话
    
  • 标签
    
  • 
  • 电话
    
  • 二维码
    
  • 点赞
    
  • 发票
    
  • 报告
    
  • QQ
    
  • 时间
    
  • 发票
    
  • 皮肤
    
  • 时间
    
  • 奖杯
    
  • 上拉
    
  • 下拉
    
  • 上拉
    
  • 奖杯
    
  • 下拉
    
  • twitter
    
  • 视频
    
  • 验证码
    
  • 开锁
    
  • 上传2
    
  • 文件-视频
    
  • 上传
    
  • 视频
    
  • 三角尺
    
  • 视频2
    
  • 视频2
    
  • 
  • 眼睛
    
  • 等待
    
  • 验证码
    
  • 警告2
    
  • 等待
    
  • 警告
    
  • QQ
    
  • 警告2
    
  • 警告
    
  • 上传
    
  • 放大
    
  • QQ空间
    
  • 缩小
    
  • 返回
    
  • 放大
    
  • 返回
    
  • 报告
    
  • 开锁
    
  • 上传2
    
  • 眼睛
    
  • 加号
    
  • 添加
    
  • 加号
    
  • 缩小
    
  • 添加
    
  • 点赞
    
  • 设置
    
  • 微信
    
  • 钱包
    
  • 微信
    
  • 微博
    
  • 微博
    
  • 钱包
    
  • twitter
    
  • 安卓
    
  • 朋友圈
    
  • 文件-文档
    
  • arrowhead-left-outline
    
  • arrowhead-up-outline
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用 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"。

  • address
    .iconaddress
  • bluetooth off
    .iconbluetoothoff
  • bluetoothon
    .iconbluetoothon
  • camera
    .iconcamera
  • course
    .iconcourse
  • bluetooth_link
    .iconbluetooth_link
  • addto
    .iconaddto
  • child
    .iconchild
  • audio
    .iconaudio
  • delete
    .icondelete
  • DND_mode
    .iconDND_mode
  • edit
    .iconedit
  • child2
    .iconchild1
  • settings
    .iconsettings
  • bluray
    .iconbluray
  • cancel
    .iconcancel
  • down
    .icondown
  • brightness
    .iconbrightness
  • musiclist
    .iconmusiclist
  • home
    .iconhome
  • favoriteslist
    .iconfavoriteslist
  • loop
    .iconloop
  • nextsong
    .iconnextsong
  • bottom
    .iconbottom
  • guarantee
    .iconguarantee
  • agreement
    .iconagreement
  • prevent
    .iconprevent
  • privacy2
    .iconprivacy
  • play
    .iconplay
  • brightness2
    .iconbrightness1
  • privac_open
    .iconprivac_open
  • conversation
    .iconconversation
  • information
    .iconinformation
  • answer
    .iconanswer
  • face
    .iconface
  • protect
    .iconprotect
  • close
    .iconclose
  • nosignal
    .iconnosignal
  • refuse
    .iconrefuse
  • selection
    .iconselection
  • previous
    .iconprevious
  • Privacy
    .iconPrivacy
  • increase
    .iconincrease
  • music
    .iconmusic
  • save
    .iconsave
  • singlecycle
    .iconsinglecycle
  • prompt
    .iconprompt
  • Incoming_call
    .iconIncoming_call
  • layered
    .iconlayered
  • collection
    .iconcollection
  • soundsize
    .iconsoundsize
  • upward
    .iconupward
  • vision
    .iconvision
  • top
    .icontop
  • history
    .iconhistory
  • shopping
    .iconshopping
  • turnvoice
    .iconturnvoice
  • locking
    .iconlocking
  • restore
    .iconrestore
  • night
    .iconnight
  • safety
    .iconsafety
  • phone
    .iconphone
  • relationship
    .iconrelationship
  • next
    .iconnext
  • timeout
    .icontimeout
  • video1
    .iconvideo
  • refresh
    .iconrefresh
  • visible
    .iconvisible
  • telephone
    .icontelephone
  • th_internet
    .iconth_internet
  • callout
    .iconcallout
  • withdraw
    .iconwithdraw
  • call
    .iconcall
  • video2
    .iconvideo1
  • hangup
    .iconhangup
  • mute
    .iconmute
  • eye_protection
    .iconeye_protection
  • distance
    .icondistance
  • voice
    .iconvoice
  • nickname
    .iconnickname
  • return
    .iconreturn
  • payment
    .iconpayment
  • privacy_closed
    .iconprivacy_closed
  • movie
    .iconmovie
  • wifi
    .iconwifi
  • random
    .iconrandom
  • problem
    .iconproblem
  • 右箭头
    .iconarrowRight-fill
  • 下箭头
    .iconarrowBottom-fill
  • 左箭头
    .iconarrowLeft
  • 苹果
    .iconapple-fill
  • 右箭头
    .iconarrowRight
  • 附件
    .iconattachment
  • 安卓
    .iconandroid-fill
  • 退格
    .iconbackspace
  • 苹果
    .iconapple
  • 退格
    .iconbackspace-fill
  • 左箭头
    .iconarrowLeft-fill
  • 附件
    .iconattachment-fill
  • 文件-音频
    .iconaudio1
  • 购物篮
    .iconbasket-fill
  • 购物篮
    .iconbasket
  • 保证金
    .iconbond-fill
  • 小车
    .iconcar-fill
  • 小车
    .iconcar
  • 下箭头
    .iconarrowBottom
  • 交换
    .iconchange-fill
  • 保证金
    .iconbond
  • 柱状图
    .iconchartline-fill
  • 交换
    .iconchange
  • 上箭头
    .iconarrowTop-fill
  • 柱状图
    .iconchartline
  • 对话
    .iconchat-fill
  • 饼图
    .iconchartpie-fill
  • 饼图
    .iconchartpie
  • 对话
    .iconchat
  • 多选框-选中
    .iconcheckbox-fill
  • 闹钟
    .iconclock
  • .iconcloud-fill
  • 多选框
    .iconcheckbox
  • 通讯录
    .iconcontacts-fill
  • 公文包
    .iconcompany-fill
  • 闹钟
    .iconclock-fill
  • 电脑
    .iconcomputer
  • 电脑
    .iconcomputer-fill
  • .iconcloud
  • 公文包
    .iconcompany
  • 合同
    .iconcontract2-fill
  • 通讯录
    .iconcontacts
  • 合同
    .iconcontract2
  • 合同
    .iconcontract
  • .iconcross-fill
  • 日志
    .icondaily-fill
  • 合同
    .iconcontract-fill
  • .iconcross
  • 日志
    .icondaily
  • 下载
    .icondownload-fill
  • 编辑2
    .iconedit2-fill
  • 书本
    .icondictionary
  • 文件-word
    .icondoc
  • 删除
    .icondelete1
  • 删除
    .icondelete-fill
  • facebook
    .iconfacebook-fill
  • 编辑2
    .iconedit2
  • .iconempty-fill
  • 下载
    .icondownload
  • 编辑
    .iconedit-fill
  • 编辑
    .iconedit1
  • 书本
    .icondictionary-fill
  • 上箭头
    .iconarrowTop
  • 编辑3
    .iconedit3-fill
  • facebook
    .iconfacebook
  • 邮件
    .iconemail-fill
  • 编辑3
    .iconedit3
  • 文件
    .iconfile-fill
  • 文件-exl
    .iconexl
  • 邮件
    .iconemail
  • 文件
    .iconfile
  • 收藏
    .iconfavorite-fill
  • 传真
    .iconfax-fill
  • 传真
    .iconfax
  • 收藏
    .iconfavorite
  • 筛选
    .iconfilter
  • 旗帜
    .iconflag-fill
  • 筛选
    .iconfilter-fill
  • 全屏2
    .iconfullscreen2
  • .iconempty
  • 文件夹
    .iconfolder-fill
  • 全屏
    .iconfullscreen
  • 全屏
    .iconfullscreen-fill
  • 全屏2
    .iconfullscreen2-fill
  • 旗帜
    .iconflag
  • 团队
    .icongroup-fill
  • 握手
    .iconhands-fill
  • 帮助
    .iconhelp
  • 证件
    .iconidcard
  • ipad
    .iconipad-fill
  • 证件
    .iconidcard-fill
  • 房子
    .iconhome-fill
  • 文件夹
    .iconfolder
  • 首页
    .iconindex
  • 布局
    .iconlayout-fill
  • 钥匙
    .iconkey-fill
  • 布局
    .iconlayout
  • 首页
    .iconindex-fill
  • 帮助
    .iconhelp-fill
  • 喜欢
    .iconlike-fill
  • ipad
    .iconipad
  • 钥匙
    .iconkey
  • 房子
    .iconhome1
  • 链接
    .iconlink-fill
  • .iconlock-fill
  • linkedin
    .iconlinkedin-fill
  • 链接
    .iconlink
  • 奖牌
    .iconmedal
  • 奖牌
    .iconmedal-fill
  • 菜单
    .iconmenu-fill
  • .iconlock
  • 文件-其他
    .iconotherfile
  • 消息
    .iconmessage
  • 我的
    .iconmy-fill
  • 公告
    .iconnotice-fill
  • 朋友圈
    .iconmoment
  • 更多
    .iconmore
  • 公告
    .iconnotice
  • 握手
    .iconhands
  • linkedin
    .iconlinkedin
  • 经理
    .iconmanager-fill
  • 照片
    .iconpicture-fill
  • 经理
    .iconmanager
  • 手机
    .iconphone1
  • 消息
    .iconmessage-fill
  • 文件-图片
    .iconimage
  • 手机
    .iconphone-fill
  • 文件-pdf
    .iconpdf
  • 更多
    .iconmore-fill
  • 笔尺
    .iconpenRuler-fill
  • 笔尺
    .iconpenRuler
  • 文件-ppt
    .iconppt
  • 地点
    .iconposition
  • 地点
    .iconposition-fill
  • 二维码
    .iconQRcode-fill
  • 喜欢
    .iconlike
  • 单选框-选中
    .iconradio-fill
  • 单选框
    .iconradio
  • 团队
    .icongroup
  • 菜单
    .iconmenu
  • 文件-压缩包
    .iconrar
  • 尺子
    .iconruler-fill
  • 照片
    .iconpicture
  • 搜索
    .iconsearch-fill
  • 尺子
    .iconruler
  • 客服
    .iconservice-fill
  • 搜索
    .iconsearch
  • 设置
    .iconsetting-fill
  • 公章
    .iconseal
  • 演示
    .iconshow
  • QQ空间
    .iconQQzone-fill
  • 我的
    .iconmy
  • 分享
    .iconshare
  • 客服
    .iconservice
  • 公章
    .iconseal-fill
  • 演示
    .iconshow-fill
  • 分享
    .iconshare-fill
  • 提交2
    .iconsubmit2-fill
  • 三角尺
    .iconsetSquare-fill
  • 皮肤
    .iconskin
  • 提交
    .iconsubmit
  • 提交
    .iconsubmit-fill
  • 标签
    .icontag-fill
  • 提交2
    .iconsubmit2
  • 电话
    .icontel-fill
  • 标签
    .icontag
  • .icontick
  • 电话
    .icontel
  • 二维码
    .iconQRcode
  • 点赞
    .iconthumbup-fill
  • 发票
    .iconticket
  • 报告
    .iconreport
  • QQ
    .iconQQ-fill
  • 时间
    .icontime-fill
  • 发票
    .iconticket-fill
  • 皮肤
    .iconskin-fill
  • 时间
    .icontime
  • 奖杯
    .icontrophy-fill
  • 上拉
    .icontoTop
  • 下拉
    .icontoBottom-fill
  • 上拉
    .icontoTop-fill
  • 奖杯
    .icontrophy
  • 下拉
    .icontoBottom
  • twitter
    .icontwitter-fill
  • 视频
    .iconvideo-fill
  • 验证码
    .iconverify-fill
  • 开锁
    .iconunlock-fill
  • 上传2
    .iconupload2-fill
  • 文件-视频
    .iconvideo2
  • 上传
    .iconupload
  • 视频
    .iconvideo3
  • 三角尺
    .iconsetSquare
  • 视频2
    .iconvideo2-fill
  • 视频2
    .iconvideo21
  • .icontick-fill
  • 眼睛
    .iconview
  • 等待
    .iconwait-fill
  • 验证码
    .iconverify
  • 警告2
    .iconwarning2
  • 等待
    .iconwait
  • 警告
    .iconwarning-fill
  • QQ
    .iconQQ
  • 警告2
    .iconwarning2-fill
  • 警告
    .iconwarning
  • 上传
    .iconupload-fill
  • 放大
    .iconzoomIn-fill
  • QQ空间
    .iconQQzone
  • 缩小
    .iconzoomOut-fill
  • 返回
    .iconwithdraw-fill
  • 放大
    .iconzoomIn
  • 返回
    .iconwithdraw1
  • 报告
    .iconreport-fill
  • 开锁
    .iconunlock
  • 上传2
    .iconupload2
  • 眼睛
    .iconview-fill
  • 加号
    .iconadd-fill
  • 添加
    .iconadd2-fill
  • 加号
    .iconadd
  • 缩小
    .iconzoomOut
  • 添加
    .iconadd2
  • 点赞
    .iconthumbup
  • 设置
    .iconsetting
  • 微信
    .iconwechat
  • 钱包
    .iconwallet-fill
  • 微信
    .iconwechat-fill
  • 微博
    .iconweibo-fill
  • 微博
    .iconweibo
  • 钱包
    .iconwallet
  • twitter
    .icontwitter
  • 安卓
    .iconandroid
  • 朋友圈
    .iconmoment-fill
  • 文件-文档
    .icontxt
  • arrowhead-left-outline
    .iconarrowhead-right-outline
  • arrowhead-up-outline
    .iconarrowhead-left-outline

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

<span class="iconfont iconxxx"></span>

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

  • address
    #iconaddress
  • bluetooth off
    #iconbluetoothoff
  • bluetoothon
    #iconbluetoothon
  • camera
    #iconcamera
  • course
    #iconcourse
  • bluetooth_link
    #iconbluetooth_link
  • addto
    #iconaddto
  • child
    #iconchild
  • audio
    #iconaudio
  • delete
    #icondelete
  • DND_mode
    #iconDND_mode
  • edit
    #iconedit
  • child2
    #iconchild1
  • settings
    #iconsettings
  • bluray
    #iconbluray
  • cancel
    #iconcancel
  • down
    #icondown
  • brightness
    #iconbrightness
  • musiclist
    #iconmusiclist
  • home
    #iconhome
  • favoriteslist
    #iconfavoriteslist
  • loop
    #iconloop
  • nextsong
    #iconnextsong
  • bottom
    #iconbottom
  • guarantee
    #iconguarantee
  • agreement
    #iconagreement
  • prevent
    #iconprevent
  • privacy2
    #iconprivacy
  • play
    #iconplay
  • brightness2
    #iconbrightness1
  • privac_open
    #iconprivac_open
  • conversation
    #iconconversation
  • information
    #iconinformation
  • answer
    #iconanswer
  • face
    #iconface
  • protect
    #iconprotect
  • close
    #iconclose
  • nosignal
    #iconnosignal
  • refuse
    #iconrefuse
  • selection
    #iconselection
  • previous
    #iconprevious
  • Privacy
    #iconPrivacy
  • increase
    #iconincrease
  • music
    #iconmusic
  • save
    #iconsave
  • singlecycle
    #iconsinglecycle
  • prompt
    #iconprompt
  • Incoming_call
    #iconIncoming_call
  • layered
    #iconlayered
  • collection
    #iconcollection
  • soundsize
    #iconsoundsize
  • upward
    #iconupward
  • vision
    #iconvision
  • top
    #icontop
  • history
    #iconhistory
  • shopping
    #iconshopping
  • turnvoice
    #iconturnvoice
  • locking
    #iconlocking
  • restore
    #iconrestore
  • night
    #iconnight
  • safety
    #iconsafety
  • phone
    #iconphone
  • relationship
    #iconrelationship
  • next
    #iconnext
  • timeout
    #icontimeout
  • video1
    #iconvideo
  • refresh
    #iconrefresh
  • visible
    #iconvisible
  • telephone
    #icontelephone
  • th_internet
    #iconth_internet
  • callout
    #iconcallout
  • withdraw
    #iconwithdraw
  • call
    #iconcall
  • video2
    #iconvideo1
  • hangup
    #iconhangup
  • mute
    #iconmute
  • eye_protection
    #iconeye_protection
  • distance
    #icondistance
  • voice
    #iconvoice
  • nickname
    #iconnickname
  • return
    #iconreturn
  • payment
    #iconpayment
  • privacy_closed
    #iconprivacy_closed
  • movie
    #iconmovie
  • wifi
    #iconwifi
  • random
    #iconrandom
  • problem
    #iconproblem
  • 右箭头
    #iconarrowRight-fill
  • 下箭头
    #iconarrowBottom-fill
  • 左箭头
    #iconarrowLeft
  • 苹果
    #iconapple-fill
  • 右箭头
    #iconarrowRight
  • 附件
    #iconattachment
  • 安卓
    #iconandroid-fill
  • 退格
    #iconbackspace
  • 苹果
    #iconapple
  • 退格
    #iconbackspace-fill
  • 左箭头
    #iconarrowLeft-fill
  • 附件
    #iconattachment-fill
  • 文件-音频
    #iconaudio1
  • 购物篮
    #iconbasket-fill
  • 购物篮
    #iconbasket
  • 保证金
    #iconbond-fill
  • 小车
    #iconcar-fill
  • 小车
    #iconcar
  • 下箭头
    #iconarrowBottom
  • 交换
    #iconchange-fill
  • 保证金
    #iconbond
  • 柱状图
    #iconchartline-fill
  • 交换
    #iconchange
  • 上箭头
    #iconarrowTop-fill
  • 柱状图
    #iconchartline
  • 对话
    #iconchat-fill
  • 饼图
    #iconchartpie-fill
  • 饼图
    #iconchartpie
  • 对话
    #iconchat
  • 多选框-选中
    #iconcheckbox-fill
  • 闹钟
    #iconclock
  • #iconcloud-fill
  • 多选框
    #iconcheckbox
  • 通讯录
    #iconcontacts-fill
  • 公文包
    #iconcompany-fill
  • 闹钟
    #iconclock-fill
  • 电脑
    #iconcomputer
  • 电脑
    #iconcomputer-fill
  • #iconcloud
  • 公文包
    #iconcompany
  • 合同
    #iconcontract2-fill
  • 通讯录
    #iconcontacts
  • 合同
    #iconcontract2
  • 合同
    #iconcontract
  • #iconcross-fill
  • 日志
    #icondaily-fill
  • 合同
    #iconcontract-fill
  • #iconcross
  • 日志
    #icondaily
  • 下载
    #icondownload-fill
  • 编辑2
    #iconedit2-fill
  • 书本
    #icondictionary
  • 文件-word
    #icondoc
  • 删除
    #icondelete1
  • 删除
    #icondelete-fill
  • facebook
    #iconfacebook-fill
  • 编辑2
    #iconedit2
  • #iconempty-fill
  • 下载
    #icondownload
  • 编辑
    #iconedit-fill
  • 编辑
    #iconedit1
  • 书本
    #icondictionary-fill
  • 上箭头
    #iconarrowTop
  • 编辑3
    #iconedit3-fill
  • facebook
    #iconfacebook
  • 邮件
    #iconemail-fill
  • 编辑3
    #iconedit3
  • 文件
    #iconfile-fill
  • 文件-exl
    #iconexl
  • 邮件
    #iconemail
  • 文件
    #iconfile
  • 收藏
    #iconfavorite-fill
  • 传真
    #iconfax-fill
  • 传真
    #iconfax
  • 收藏
    #iconfavorite
  • 筛选
    #iconfilter
  • 旗帜
    #iconflag-fill
  • 筛选
    #iconfilter-fill
  • 全屏2
    #iconfullscreen2
  • #iconempty
  • 文件夹
    #iconfolder-fill
  • 全屏
    #iconfullscreen
  • 全屏
    #iconfullscreen-fill
  • 全屏2
    #iconfullscreen2-fill
  • 旗帜
    #iconflag
  • 团队
    #icongroup-fill
  • 握手
    #iconhands-fill
  • 帮助
    #iconhelp
  • 证件
    #iconidcard
  • ipad
    #iconipad-fill
  • 证件
    #iconidcard-fill
  • 房子
    #iconhome-fill
  • 文件夹
    #iconfolder
  • 首页
    #iconindex
  • 布局
    #iconlayout-fill
  • 钥匙
    #iconkey-fill
  • 布局
    #iconlayout
  • 首页
    #iconindex-fill
  • 帮助
    #iconhelp-fill
  • 喜欢
    #iconlike-fill
  • ipad
    #iconipad
  • 钥匙
    #iconkey
  • 房子
    #iconhome1
  • 链接
    #iconlink-fill
  • #iconlock-fill
  • linkedin
    #iconlinkedin-fill
  • 链接
    #iconlink
  • 奖牌
    #iconmedal
  • 奖牌
    #iconmedal-fill
  • 菜单
    #iconmenu-fill
  • #iconlock
  • 文件-其他
    #iconotherfile
  • 消息
    #iconmessage
  • 我的
    #iconmy-fill
  • 公告
    #iconnotice-fill
  • 朋友圈
    #iconmoment
  • 更多
    #iconmore
  • 公告
    #iconnotice
  • 握手
    #iconhands
  • linkedin
    #iconlinkedin
  • 经理
    #iconmanager-fill
  • 照片
    #iconpicture-fill
  • 经理
    #iconmanager
  • 手机
    #iconphone1
  • 消息
    #iconmessage-fill
  • 文件-图片
    #iconimage
  • 手机
    #iconphone-fill
  • 文件-pdf
    #iconpdf
  • 更多
    #iconmore-fill
  • 笔尺
    #iconpenRuler-fill
  • 笔尺
    #iconpenRuler
  • 文件-ppt
    #iconppt
  • 地点
    #iconposition
  • 地点
    #iconposition-fill
  • 二维码
    #iconQRcode-fill
  • 喜欢
    #iconlike
  • 单选框-选中
    #iconradio-fill
  • 单选框
    #iconradio
  • 团队
    #icongroup
  • 菜单
    #iconmenu
  • 文件-压缩包
    #iconrar
  • 尺子
    #iconruler-fill
  • 照片
    #iconpicture
  • 搜索
    #iconsearch-fill
  • 尺子
    #iconruler
  • 客服
    #iconservice-fill
  • 搜索
    #iconsearch
  • 设置
    #iconsetting-fill
  • 公章
    #iconseal
  • 演示
    #iconshow
  • QQ空间
    #iconQQzone-fill
  • 我的
    #iconmy
  • 分享
    #iconshare
  • 客服
    #iconservice
  • 公章
    #iconseal-fill
  • 演示
    #iconshow-fill
  • 分享
    #iconshare-fill
  • 提交2
    #iconsubmit2-fill
  • 三角尺
    #iconsetSquare-fill
  • 皮肤
    #iconskin
  • 提交
    #iconsubmit
  • 提交
    #iconsubmit-fill
  • 标签
    #icontag-fill
  • 提交2
    #iconsubmit2
  • 电话
    #icontel-fill
  • 标签
    #icontag
  • #icontick
  • 电话
    #icontel
  • 二维码
    #iconQRcode
  • 点赞
    #iconthumbup-fill
  • 发票
    #iconticket
  • 报告
    #iconreport
  • QQ
    #iconQQ-fill
  • 时间
    #icontime-fill
  • 发票
    #iconticket-fill
  • 皮肤
    #iconskin-fill
  • 时间
    #icontime
  • 奖杯
    #icontrophy-fill
  • 上拉
    #icontoTop
  • 下拉
    #icontoBottom-fill
  • 上拉
    #icontoTop-fill
  • 奖杯
    #icontrophy
  • 下拉
    #icontoBottom
  • twitter
    #icontwitter-fill
  • 视频
    #iconvideo-fill
  • 验证码
    #iconverify-fill
  • 开锁
    #iconunlock-fill
  • 上传2
    #iconupload2-fill
  • 文件-视频
    #iconvideo2
  • 上传
    #iconupload
  • 视频
    #iconvideo3
  • 三角尺
    #iconsetSquare
  • 视频2
    #iconvideo2-fill
  • 视频2
    #iconvideo21
  • #icontick-fill
  • 眼睛
    #iconview
  • 等待
    #iconwait-fill
  • 验证码
    #iconverify
  • 警告2
    #iconwarning2
  • 等待
    #iconwait
  • 警告
    #iconwarning-fill
  • QQ
    #iconQQ
  • 警告2
    #iconwarning2-fill
  • 警告
    #iconwarning
  • 上传
    #iconupload-fill
  • 放大
    #iconzoomIn-fill
  • QQ空间
    #iconQQzone
  • 缩小
    #iconzoomOut-fill
  • 返回
    #iconwithdraw-fill
  • 放大
    #iconzoomIn
  • 返回
    #iconwithdraw1
  • 报告
    #iconreport-fill
  • 开锁
    #iconunlock
  • 上传2
    #iconupload2
  • 眼睛
    #iconview-fill
  • 加号
    #iconadd-fill
  • 添加
    #iconadd2-fill
  • 加号
    #iconadd
  • 缩小
    #iconzoomOut
  • 添加
    #iconadd2
  • 点赞
    #iconthumbup
  • 设置
    #iconsetting
  • 微信
    #iconwechat
  • 钱包
    #iconwallet-fill
  • 微信
    #iconwechat-fill
  • 微博
    #iconweibo-fill
  • 微博
    #iconweibo
  • 钱包
    #iconwallet
  • twitter
    #icontwitter
  • 安卓
    #iconandroid
  • 朋友圈
    #iconmoment-fill
  • 文件-文档
    #icontxt
  • arrowhead-left-outline
    #iconarrowhead-right-outline
  • arrowhead-up-outline
    #iconarrowhead-left-outline

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>