• all
    
  • back
    
  • cart
    
  • Category
    
  • close
    
  • comments
    
  • cry
    
  • delete
    
  • edit
    
  • email
    
  • favorite
    
  • form
    
  • help
    
  • information
    
  • less
    
  • more_unfold
    
  • more
    
  • pic
    
  • QRCode
    
  • refresh
    
  • RFQ
    
  • search
    
  • selected
    
  • set
    
  • Smile
    
  • success
    
  • survey
    
  • training
    
  • ViewGallery
    
  • Viewlist
    
  • warning
    
  • wrong
    
  • account
    
  • add
    
  • atm
    
  • clock
    
  • remind
    
  • calendar
    
  • attachment
    
  • discount
    
  • service
    
  • print
    
  • box
    
  • process
    
  • beauty
    
  • electrical
    
  • home
    
  • electronics
    
  • gifts
    
  • lights
    
  • sports
    
  • toys
    
  • auto
    
  • jewelry
    
  • trade-assurance
    
  • browse
    
  • rfq-qm
    
  • rfq-quantity
    
  • atm-away
    
  • rfq
    
  • scanning
    
  • compare
    
  • filter
    
  • pin
    
  • history
    
  • product-features
    
  • supplier-features
    
  • similar-product
    
  • link
    
  • cut
    
  • nav-list
    
  • image-text
    
  • text
    
  • move
    
  • subtract
    
  • dollar
    
  • raw
    
  • office
    
  • agriculture
    
  • machinery
    
  • assessed-Badge
    
  • personal-center
    
  • integral
    
  • operation
    
  • remind
    
  • download
    
  • map
    
  • iconfont-5
    
  • bad
    
  • good
    
  • skip
    
  • play
    
  • stop
    
  • compass
    
  • security
    
  • share
    
  • store
    
  • manage-order
    
  • rejected-order
    
  • phone
    
  • bussiness-man
    
  • shoes
    
  • Mobile-phone
    
  • email-filling
    
  • favorites-filling
    
  • account-filling
    
  • wechat
    
  • credit-level
    
  • credit-level-filling
    
  • 客服
    
  • exl
    
  • pdf
    
  • zip
    
  • 购物车
    
  • 购物车添加
    
  • 错误
    
  • 二维码
    
  • 聚收藏
    
  • 垃圾箱
    
  • sorting
    
  • 链接
    
  • 闹钟
    
  • 扫一扫
    
  • 上翻
    
  • 设置
    
  • 声音
    
  • 时间
    
  • 收货地址
    
  • 首页
    
  • 刷新
    
  • 搜索
    
  • 
  • 提示
    
  • 完成
    
  • 我的订单
    
  • 我的反馈
    
  • 我的红包
    
  • 我的聚划算
    
  • 我的优惠券
    
  • 下翻
    
  • 下拉
    
  • 向上箭头
    
  • 向下箭头
    
  • 向右箭头
    
  • 向左箭头
    
  • 眼睛
    
  • 意见反馈
    
  • 照相机
    
  • 正确
    
  • 消息中心
    
  • 另存为
    
  • 
  • copy
    
  • save
    
  • inquiry-template
    
  • template-default
    
  • 30-1
    
  • 
  • 礼物
    
  • 语音
    
  • libra
    
  • survey
    
  • ship
    
  • bussiness-card
    
  • hot
    
  • data
    
  • trade
    
  • onepage
    
  • locked-1
    
  • locked
    
  • signboard
    
  • shuffling-banner
    
  • component
    
  • component-filling
    
  • color
    
  • color-filling
    
  • favorites
    
  • RFQ
    
  • original-image
    
  • logistic
    
  • Calculator
    
  • video
    
  • earth
    
  • task-management
    
  • trust
    
  • password
    
  • 3column
    
  • apparel
    
  • bags
    
  • folder
    
  • 4column
    
  • code
    
  • customs-clearance
    
  • good-filling
    
  • camera
    
  • 分享方式
    
  • 技术服务
    
  • 运营管理
    
  • pin-fill
    
  • help-fill
    
  • add-account
    
  • 软件开发包
    
  • 告警
    
  • 任务进程
    
  • 消息通知
    
  • listing-content
    
  • warehouse-delivery
    
  • customization
    
  • inspection
    
  • packing-labeling
    
  • online-tracking
    
  • 消息
    
  • electrical-equipment
    
  • home-appliances
    
  • furniture
    
  • fashion-accessories
    
  • security-protection
    
  • textile-products
    
  • tools-hardware
    
  • office-supplies
    
  • vehicles
    

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"。

  • all
    .el-icon-third-all
  • back
    .el-icon-third-back
  • cart
    .el-icon-third-cart
  • Category
    .el-icon-third-category
  • close
    .el-icon-third-close
  • comments
    .el-icon-third-comments
  • cry
    .el-icon-third-cry
  • delete
    .el-icon-third-delete
  • edit
    .el-icon-third-edit
  • email
    .el-icon-third-email
  • favorite
    .el-icon-third-favorite
  • form
    .el-icon-third-form
  • help
    .el-icon-third-help
  • information
    .el-icon-third-information
  • less
    .el-icon-third-less
  • more_unfold
    .el-icon-third-moreunfold
  • more
    .el-icon-third-more
  • pic
    .el-icon-third-pic
  • QRCode
    .el-icon-third-qrcode
  • refresh
    .el-icon-third-refresh
  • RFQ
    .el-icon-third-rfq
  • search
    .el-icon-third-search
  • selected
    .el-icon-third-selected
  • set
    .el-icon-third-set
  • Smile
    .el-icon-third-smile
  • success
    .el-icon-third-success
  • survey
    .el-icon-third-survey
  • training
    .el-icon-third-training
  • ViewGallery
    .el-icon-third-viewgallery
  • Viewlist
    .el-icon-third-viewlist
  • warning
    .el-icon-third-warning
  • wrong
    .el-icon-third-wrong
  • account
    .el-icon-third-account
  • add
    .el-icon-third-add
  • atm
    .el-icon-third-atm
  • clock
    .el-icon-third-clock
  • remind
    .el-icon-third-remind
  • calendar
    .el-icon-third-calendar
  • attachment
    .el-icon-third-attachment
  • discount
    .el-icon-third-discount
  • service
    .el-icon-third-service
  • print
    .el-icon-third-print
  • box
    .el-icon-third-box
  • process
    .el-icon-third-process
  • beauty
    .el-icon-third-beauty
  • electrical
    .el-icon-third-electrical
  • home
    .el-icon-third-home
  • electronics
    .el-icon-third-electronics
  • gifts
    .el-icon-third-gifts
  • lights
    .el-icon-third-lights
  • sports
    .el-icon-third-sports
  • toys
    .el-icon-third-toys
  • auto
    .el-icon-third-auto
  • jewelry
    .el-icon-third-jewelry
  • trade-assurance
    .el-icon-third-trade-assurance
  • browse
    .el-icon-third-browse
  • rfq-qm
    .el-icon-third-rfqqm
  • rfq-quantity
    .el-icon-third-rfqquantity
  • atm-away
    .el-icon-third-atmaway
  • rfq
    .el-icon-third-rfq1
  • scanning
    .el-icon-third-scanning
  • compare
    .el-icon-third-compare
  • filter
    .el-icon-third-filter
  • pin
    .el-icon-third-pin
  • history
    .el-icon-third-history
  • product-features
    .el-icon-third-productfeatures
  • supplier-features
    .el-icon-third-supplierfeatures
  • similar-product
    .el-icon-third-similarproduct
  • link
    .el-icon-third-link
  • cut
    .el-icon-third-cut
  • nav-list
    .el-icon-third-navlist
  • image-text
    .el-icon-third-imagetext
  • text
    .el-icon-third-text
  • move
    .el-icon-third-move
  • subtract
    .el-icon-third-subtract
  • dollar
    .el-icon-third-dollar
  • raw
    .el-icon-third-raw
  • office
    .el-icon-third-office
  • agriculture
    .el-icon-third-agriculture
  • machinery
    .el-icon-third-machinery
  • assessed-Badge
    .el-icon-third-assessedbadge
  • personal-center
    .el-icon-third-gerenzhongxin
  • integral
    .el-icon-third-jifen
  • operation
    .el-icon-third-operation
  • remind
    .el-icon-third-remind1
  • download
    .el-icon-third-icondownload
  • map
    .el-icon-third-map
  • iconfont-5
    .el-icon-third-iconfont5
  • bad
    .el-icon-third-bad
  • good
    .el-icon-third-good
  • skip
    .el-icon-third-skip
  • play
    .el-icon-third-iconfontplay2
  • stop
    .el-icon-third-iconfontstop
  • compass
    .el-icon-third-compass
  • security
    .el-icon-third-security
  • share
    .el-icon-third-share
  • store
    .el-icon-third-store
  • manage-order
    .el-icon-third-manageorder
  • rejected-order
    .el-icon-third-rejectedorder
  • phone
    .el-icon-third-phone
  • bussiness-man
    .el-icon-third-bussinessman
  • shoes
    .el-icon-third-shoes
  • Mobile-phone
    .el-icon-third-mobilephone
  • email-filling
    .el-icon-third-emailfilling
  • favorites-filling
    .el-icon-third-favoritesfilling
  • account-filling
    .el-icon-third-accountfilling
  • wechat
    .el-icon-third-custom-wechat
  • credit-level
    .el-icon-third-creditlevel
  • credit-level-filling
    .el-icon-third-creditlevelfilling
  • 客服
    .el-icon-third-kefu
  • exl
    .el-icon-third-exl
  • pdf
    .el-icon-third-pdf
  • zip
    .el-icon-third-zip
  • 购物车
    .el-icon-third-gouwuche
  • 购物车添加
    .el-icon-third-gouwuchetianjia
  • 错误
    .el-icon-third-cuowu
  • 二维码
    .el-icon-third-erweima
  • 聚收藏
    .el-icon-third-jushoucang
  • 垃圾箱
    .el-icon-third-lajixiang
  • sorting
    .el-icon-third-sorting
  • 链接
    .el-icon-third-lianjie
  • 闹钟
    .el-icon-third-naozhong
  • 扫一扫
    .el-icon-third-saoyisao
  • 上翻
    .el-icon-third-shangfan
  • 设置
    .el-icon-third-shezhi
  • 声音
    .el-icon-third-shengyin
  • 时间
    .el-icon-third-shijian
  • 收货地址
    .el-icon-third-shouhuodizhi
  • 首页
    .el-icon-third-shouye
  • 刷新
    .el-icon-third-shuaxin
  • 搜索
    .el-icon-third-sousuo
  • .el-icon-third-suo
  • 提示
    .el-icon-third-tishi
  • 完成
    .el-icon-third-wancheng
  • 我的订单
    .el-icon-third-wodedingdan
  • 我的反馈
    .el-icon-third-wodefankui
  • 我的红包
    .el-icon-third-wodehongbao
  • 我的聚划算
    .el-icon-third-wodejuhuasuan
  • 我的优惠券
    .el-icon-third-wodeyouhuiquan
  • 下翻
    .el-icon-third-xiafan
  • 下拉
    .el-icon-third-xiala
  • 向上箭头
    .el-icon-third-xiangshangjiantou
  • 向下箭头
    .el-icon-third-xiangxiajiantou
  • 向右箭头
    .el-icon-third-xiangyoujiantou
  • 向左箭头
    .el-icon-third-xiangzuojiantou
  • 眼睛
    .el-icon-third-yanjing
  • 意见反馈
    .el-icon-third-yijianfankui
  • 照相机
    .el-icon-third-zhaoxiangji
  • 正确
    .el-icon-third-zhengque
  • 消息中心
    .el-icon-third-xiaoxizhongxin
  • 另存为
    .el-icon-third-lingcunwei
  • .el-icon-third-huo
  • copy
    .el-icon-third-copy
  • save
    .el-icon-third-save
  • inquiry-template
    .el-icon-third-inquirytemplate
  • template-default
    .el-icon-third-templatedefault
  • 30-1
    .el-icon-third-301
  • .el-icon-third-mian
  • 礼物
    .el-icon-third-liwu
  • 语音
    .el-icon-third-yuyin
  • libra
    .el-icon-third-libra
  • survey
    .el-icon-third-survey1
  • ship
    .el-icon-third-ship
  • bussiness-card
    .el-icon-third-bussinesscard
  • hot
    .el-icon-third-hot
  • data
    .el-icon-third-data
  • trade
    .el-icon-third-trade
  • onepage
    .el-icon-third-onepage48
  • locked-1
    .el-icon-third-locked-1
  • locked
    .el-icon-third-locked
  • signboard
    .el-icon-third-signboard
  • shuffling-banner
    .el-icon-third-shuffling-banner
  • component
    .el-icon-third-component
  • component-filling
    .el-icon-third-component-filling
  • color
    .el-icon-third-color
  • color-filling
    .el-icon-third-color-filling
  • favorites
    .el-icon-third-favorites
  • RFQ
    .el-icon-third-RFQ
  • original-image
    .el-icon-third-originalimage
  • logistic
    .el-icon-third-logistic
  • Calculator
    .el-icon-third-Calculator
  • video
    .el-icon-third-video
  • earth
    .el-icon-third-earth
  • task-management
    .el-icon-third-task-management
  • trust
    .el-icon-third-trust
  • password
    .el-icon-third-password
  • 3column
    .el-icon-third-column
  • apparel
    .el-icon-third-apparel
  • bags
    .el-icon-third-bags
  • folder
    .el-icon-third-folder
  • 4column
    .el-icon-third-column1
  • code
    .el-icon-third-code
  • customs-clearance
    .el-icon-third-customs-clearance
  • good-filling
    .el-icon-third-good-filling
  • camera
    .el-icon-third-camera
  • 分享方式
    .el-icon-third-fenxiangfangshi
  • 技术服务
    .el-icon-third-jishufuwu
  • 运营管理
    .el-icon-third-yunyingguanli
  • pin-fill
    .el-icon-third-pin-fill
  • help-fill
    .el-icon-third-help-fill
  • add-account
    .el-icon-third-add-account
  • 软件开发包
    .el-icon-third-ruanjiankaifabao
  • 告警
    .el-icon-third-gaojing
  • 任务进程
    .el-icon-third-renwujincheng
  • 消息通知
    .el-icon-third-xiaoxitongzhi
  • listing-content
    .el-icon-third-listing-content
  • warehouse-delivery
    .el-icon-third-warehouse-delivery
  • customization
    .el-icon-third-customization
  • inspection
    .el-icon-third-inspection
  • packing-labeling
    .el-icon-third-packing-labeling
  • online-tracking
    .el-icon-third-online-tracking
  • 消息
    .el-icon-third-xiaoxi
  • electrical-equipment
    .el-icon-third-electrical-equipment
  • home-appliances
    .el-icon-third-home-appliances
  • furniture
    .el-icon-third-furniture
  • fashion-accessories
    .el-icon-third-fashion-accessories
  • security-protection
    .el-icon-third-security-protection
  • textile-products
    .el-icon-third-textile-products
  • tools-hardware
    .el-icon-third-tools-hardware
  • office-supplies
    .el-icon-third-office-supplies
  • vehicles
    .el-icon-third-vehicles

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • all
    #el-icon-third-all
  • back
    #el-icon-third-back
  • cart
    #el-icon-third-cart
  • Category
    #el-icon-third-category
  • close
    #el-icon-third-close
  • comments
    #el-icon-third-comments
  • cry
    #el-icon-third-cry
  • delete
    #el-icon-third-delete
  • edit
    #el-icon-third-edit
  • email
    #el-icon-third-email
  • favorite
    #el-icon-third-favorite
  • form
    #el-icon-third-form
  • help
    #el-icon-third-help
  • information
    #el-icon-third-information
  • less
    #el-icon-third-less
  • more_unfold
    #el-icon-third-moreunfold
  • more
    #el-icon-third-more
  • pic
    #el-icon-third-pic
  • QRCode
    #el-icon-third-qrcode
  • refresh
    #el-icon-third-refresh
  • RFQ
    #el-icon-third-rfq
  • search
    #el-icon-third-search
  • selected
    #el-icon-third-selected
  • set
    #el-icon-third-set
  • Smile
    #el-icon-third-smile
  • success
    #el-icon-third-success
  • survey
    #el-icon-third-survey
  • training
    #el-icon-third-training
  • ViewGallery
    #el-icon-third-viewgallery
  • Viewlist
    #el-icon-third-viewlist
  • warning
    #el-icon-third-warning
  • wrong
    #el-icon-third-wrong
  • account
    #el-icon-third-account
  • add
    #el-icon-third-add
  • atm
    #el-icon-third-atm
  • clock
    #el-icon-third-clock
  • remind
    #el-icon-third-remind
  • calendar
    #el-icon-third-calendar
  • attachment
    #el-icon-third-attachment
  • discount
    #el-icon-third-discount
  • service
    #el-icon-third-service
  • print
    #el-icon-third-print
  • box
    #el-icon-third-box
  • process
    #el-icon-third-process
  • beauty
    #el-icon-third-beauty
  • electrical
    #el-icon-third-electrical
  • home
    #el-icon-third-home
  • electronics
    #el-icon-third-electronics
  • gifts
    #el-icon-third-gifts
  • lights
    #el-icon-third-lights
  • sports
    #el-icon-third-sports
  • toys
    #el-icon-third-toys
  • auto
    #el-icon-third-auto
  • jewelry
    #el-icon-third-jewelry
  • trade-assurance
    #el-icon-third-trade-assurance
  • browse
    #el-icon-third-browse
  • rfq-qm
    #el-icon-third-rfqqm
  • rfq-quantity
    #el-icon-third-rfqquantity
  • atm-away
    #el-icon-third-atmaway
  • rfq
    #el-icon-third-rfq1
  • scanning
    #el-icon-third-scanning
  • compare
    #el-icon-third-compare
  • filter
    #el-icon-third-filter
  • pin
    #el-icon-third-pin
  • history
    #el-icon-third-history
  • product-features
    #el-icon-third-productfeatures
  • supplier-features
    #el-icon-third-supplierfeatures
  • similar-product
    #el-icon-third-similarproduct
  • link
    #el-icon-third-link
  • cut
    #el-icon-third-cut
  • nav-list
    #el-icon-third-navlist
  • image-text
    #el-icon-third-imagetext
  • text
    #el-icon-third-text
  • move
    #el-icon-third-move
  • subtract
    #el-icon-third-subtract
  • dollar
    #el-icon-third-dollar
  • raw
    #el-icon-third-raw
  • office
    #el-icon-third-office
  • agriculture
    #el-icon-third-agriculture
  • machinery
    #el-icon-third-machinery
  • assessed-Badge
    #el-icon-third-assessedbadge
  • personal-center
    #el-icon-third-gerenzhongxin
  • integral
    #el-icon-third-jifen
  • operation
    #el-icon-third-operation
  • remind
    #el-icon-third-remind1
  • download
    #el-icon-third-icondownload
  • map
    #el-icon-third-map
  • iconfont-5
    #el-icon-third-iconfont5
  • bad
    #el-icon-third-bad
  • good
    #el-icon-third-good
  • skip
    #el-icon-third-skip
  • play
    #el-icon-third-iconfontplay2
  • stop
    #el-icon-third-iconfontstop
  • compass
    #el-icon-third-compass
  • security
    #el-icon-third-security
  • share
    #el-icon-third-share
  • store
    #el-icon-third-store
  • manage-order
    #el-icon-third-manageorder
  • rejected-order
    #el-icon-third-rejectedorder
  • phone
    #el-icon-third-phone
  • bussiness-man
    #el-icon-third-bussinessman
  • shoes
    #el-icon-third-shoes
  • Mobile-phone
    #el-icon-third-mobilephone
  • email-filling
    #el-icon-third-emailfilling
  • favorites-filling
    #el-icon-third-favoritesfilling
  • account-filling
    #el-icon-third-accountfilling
  • wechat
    #el-icon-third-custom-wechat
  • credit-level
    #el-icon-third-creditlevel
  • credit-level-filling
    #el-icon-third-creditlevelfilling
  • 客服
    #el-icon-third-kefu
  • exl
    #el-icon-third-exl
  • pdf
    #el-icon-third-pdf
  • zip
    #el-icon-third-zip
  • 购物车
    #el-icon-third-gouwuche
  • 购物车添加
    #el-icon-third-gouwuchetianjia
  • 错误
    #el-icon-third-cuowu
  • 二维码
    #el-icon-third-erweima
  • 聚收藏
    #el-icon-third-jushoucang
  • 垃圾箱
    #el-icon-third-lajixiang
  • sorting
    #el-icon-third-sorting
  • 链接
    #el-icon-third-lianjie
  • 闹钟
    #el-icon-third-naozhong
  • 扫一扫
    #el-icon-third-saoyisao
  • 上翻
    #el-icon-third-shangfan
  • 设置
    #el-icon-third-shezhi
  • 声音
    #el-icon-third-shengyin
  • 时间
    #el-icon-third-shijian
  • 收货地址
    #el-icon-third-shouhuodizhi
  • 首页
    #el-icon-third-shouye
  • 刷新
    #el-icon-third-shuaxin
  • 搜索
    #el-icon-third-sousuo
  • #el-icon-third-suo
  • 提示
    #el-icon-third-tishi
  • 完成
    #el-icon-third-wancheng
  • 我的订单
    #el-icon-third-wodedingdan
  • 我的反馈
    #el-icon-third-wodefankui
  • 我的红包
    #el-icon-third-wodehongbao
  • 我的聚划算
    #el-icon-third-wodejuhuasuan
  • 我的优惠券
    #el-icon-third-wodeyouhuiquan
  • 下翻
    #el-icon-third-xiafan
  • 下拉
    #el-icon-third-xiala
  • 向上箭头
    #el-icon-third-xiangshangjiantou
  • 向下箭头
    #el-icon-third-xiangxiajiantou
  • 向右箭头
    #el-icon-third-xiangyoujiantou
  • 向左箭头
    #el-icon-third-xiangzuojiantou
  • 眼睛
    #el-icon-third-yanjing
  • 意见反馈
    #el-icon-third-yijianfankui
  • 照相机
    #el-icon-third-zhaoxiangji
  • 正确
    #el-icon-third-zhengque
  • 消息中心
    #el-icon-third-xiaoxizhongxin
  • 另存为
    #el-icon-third-lingcunwei
  • #el-icon-third-huo
  • copy
    #el-icon-third-copy
  • save
    #el-icon-third-save
  • inquiry-template
    #el-icon-third-inquirytemplate
  • template-default
    #el-icon-third-templatedefault
  • 30-1
    #el-icon-third-301
  • #el-icon-third-mian
  • 礼物
    #el-icon-third-liwu
  • 语音
    #el-icon-third-yuyin
  • libra
    #el-icon-third-libra
  • survey
    #el-icon-third-survey1
  • ship
    #el-icon-third-ship
  • bussiness-card
    #el-icon-third-bussinesscard
  • hot
    #el-icon-third-hot
  • data
    #el-icon-third-data
  • trade
    #el-icon-third-trade
  • onepage
    #el-icon-third-onepage48
  • locked-1
    #el-icon-third-locked-1
  • locked
    #el-icon-third-locked
  • signboard
    #el-icon-third-signboard
  • shuffling-banner
    #el-icon-third-shuffling-banner
  • component
    #el-icon-third-component
  • component-filling
    #el-icon-third-component-filling
  • color
    #el-icon-third-color
  • color-filling
    #el-icon-third-color-filling
  • favorites
    #el-icon-third-favorites
  • RFQ
    #el-icon-third-RFQ
  • original-image
    #el-icon-third-originalimage
  • logistic
    #el-icon-third-logistic
  • Calculator
    #el-icon-third-Calculator
  • video
    #el-icon-third-video
  • earth
    #el-icon-third-earth
  • task-management
    #el-icon-third-task-management
  • trust
    #el-icon-third-trust
  • password
    #el-icon-third-password
  • 3column
    #el-icon-third-column
  • apparel
    #el-icon-third-apparel
  • bags
    #el-icon-third-bags
  • folder
    #el-icon-third-folder
  • 4column
    #el-icon-third-column1
  • code
    #el-icon-third-code
  • customs-clearance
    #el-icon-third-customs-clearance
  • good-filling
    #el-icon-third-good-filling
  • camera
    #el-icon-third-camera
  • 分享方式
    #el-icon-third-fenxiangfangshi
  • 技术服务
    #el-icon-third-jishufuwu
  • 运营管理
    #el-icon-third-yunyingguanli
  • pin-fill
    #el-icon-third-pin-fill
  • help-fill
    #el-icon-third-help-fill
  • add-account
    #el-icon-third-add-account
  • 软件开发包
    #el-icon-third-ruanjiankaifabao
  • 告警
    #el-icon-third-gaojing
  • 任务进程
    #el-icon-third-renwujincheng
  • 消息通知
    #el-icon-third-xiaoxitongzhi
  • listing-content
    #el-icon-third-listing-content
  • warehouse-delivery
    #el-icon-third-warehouse-delivery
  • customization
    #el-icon-third-customization
  • inspection
    #el-icon-third-inspection
  • packing-labeling
    #el-icon-third-packing-labeling
  • online-tracking
    #el-icon-third-online-tracking
  • 消息
    #el-icon-third-xiaoxi
  • electrical-equipment
    #el-icon-third-electrical-equipment
  • home-appliances
    #el-icon-third-home-appliances
  • furniture
    #el-icon-third-furniture
  • fashion-accessories
    #el-icon-third-fashion-accessories
  • security-protection
    #el-icon-third-security-protection
  • textile-products
    #el-icon-third-textile-products
  • tools-hardware
    #el-icon-third-tools-hardware
  • office-supplies
    #el-icon-third-office-supplies
  • vehicles
    #el-icon-third-vehicles

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>