• brush-line
    
  • mark-pen-line
    
  • eraser-fill
    
  • magic-fill
    
  • font-size-2
    
  • landscape-line
    
  • rmb
    
  • flashlight-fill
    
  • battery-2-charge-line
    
  • battery-2-charge-fill
    
  • qq-fill
    
  • wechat-fill
    
  • weibo-fill
    
  • eye-off-fill
    
  • stop-mini-fill
    
  • chat-2-line
    
  • money-cny-circle-line
    
  • 实心地球
    
  • v认证管理
    
  • article-line
    
  • men-line
    
  • women-line
    
  • 
    check-line
    
  • upload-fill
    
  • more-line
    
  • arrow-drop-down-fill
    
  • arrow-drop-left-fill
    
  • arrow-drop-up-fill
    
  • arrow-go-back-line
    
  • arrow-go-forward-line
    
  • arrow-up-line
    
  • zoom-in-line
    
  • rotate-lock-fill
    
  • lock-2-line
    
  • indeterminate-circle-line
    
  • bar-chart-fill
    
  • heart-pulse-line
    
  • chat-heart-line
    
  • chat-poll-line
    
  • chat-quote-line
    
  • double-quotes-l
    
  • emotion-line
    
  • hashtag
    
  • parent-line
    
  • arrow-right-s-fill
    
  • customer-service-2-line
    
  • chat-smile-2-line
    
  • arrow-left-right-fill
    
  • profile-fill
    
  • file-3-fill
    
  • movie-fill
    
  • close-circle-fill
    
  • close-circle-line
    
  • checkbox-circle-fill
    
  • checkbox-circle-line
    
  • whatsapp-line
    
  • filter-2-line
    
  • 我的购物车
    
  • 付款成功账单
    
  • 结算3
    
  • exchange-cny-line
    
  • 咖啡 等待
    
  • check-double-line
    
  • map-pin-fill
    
  • bank-card-fill
    
  • coins-fill
    
  • vip-line
    
  • alipay-fill
    
  • paypal-fill
    
  • wechat-pay-fill
    
  • 
  • star-line
    
  • edit-2-line
    
  • share-forward-fill
    
  • star-fill
    
  • price-tag-3-line
    
  • play-mini-fill
    
  • rhythm-line
    
  • download
    
  • video
    
  • 
  • lock-2-fill
    
  • chat-2-fill
    
  • play-circle-line
    
  • message-3-fill
    
  • login-circle-line
    
  • user-settings-line
    
  • skull-2-line
    
  • vip-crown-2-line
    
  • vip-diamond-line
    
  • task-line
    
  • share-line
    
  • bit-coin-line
    
  • coins-line
    
  • add-circle-line
    
  • notification-badge-line
    
  • qr-code-fill
    
  • gift-2-line
    
  • coupon-2-line
    
  • shopping-cart-2-line
    
  • pages-line
    
  • eye-fill
    
  • download-cloud-line
    
  • coin-line
    
  • git-repository-private-line
    
  • information-line
    
  • 不喜欢
    
  • heart-fill
    
  • thumb-down-line
    
  • thumb-up-line
    
  • donut-chart-fill
    
  • chat-smile-3-line
    
  • clipboard-line
    
  • close-line
    
  • question-line
    
  • blaze-line
    
  • flashlight-line
    
  • rocket-2-line
    
  • home-heart-line
    
  • bookmark-3-line
    
  • questionnaire-line
    
  • notification-3-line
    
  • menu-fill
    
  • shield-user-line
    
  • database-2-line
    
  • emotion-laugh-line
    
  • emotion-normal-line
    
  • arrow-down-s-line
    
  • arrow-left-s-line
    
  • arrow-right-s-line
    
  • arrow-up-s-line
    
  • mail-send-line
    
  • quill-pen-line
    
  • file-list-2-line
    
  • folder-add-line
    
  • hand-heart-line
    
  • dislike-line
    
  • heart-add-line
    
  • hearts-line
    
  • settings-3-line
    
  • account-circle-line
    
  • user-heart-line
    
  • add-line
    
  • subtract-line
    
  • pantone-line
    
  • exchange-box-line
    
  • shopping-bag-line
    
  • share-forward-box-fill
    
  • qq-line
    
  • wechat-line
    
  • weibo-line
    
  • funds-box-line
    
  • funds-box-line
    
  • external-link-line
    
  • image-fill
    
  • search-line
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • brush-line
    .b2-brush-line
  • mark-pen-line
    .b2-mark-pen-line
  • eraser-fill
    .b2-eraser-fill
  • magic-fill
    .b2-magic-fill
  • font-size-2
    .b2-font-size-2
  • landscape-line
    .b2-landscape-line
  • rmb
    .b2-rmb
  • flashlight-fill
    .b2-flashlight-fill
  • battery-2-charge-line
    .b2-battery-2-charge-line
  • battery-2-charge-fill
    .b2-battery-2-charge-fill
  • qq-fill
    .b2-qq
  • wechat-fill
    .b2-weixin
  • weibo-fill
    .b2-weibo
  • eye-off-fill
    .b2-eye-off-fill
  • stop-mini-fill
    .b2-stop-mini-fill
  • chat-2-line
    .b2-chat-2-line
  • money-cny-circle-line
    .b2-money-cny-circle-line
  • 实心地球
    .b2-shixindiqiu
  • v认证管理
    .b2-vrenzhengguanli
  • article-line
    .b2-article-line
  • men-line
    .b2-men-line
  • women-line
    .b2-women-line
  • check-line
    .b2-check-line
  • upload-fill
    .b2-upload-fill
  • more-line
    .b2-more-line
  • arrow-drop-down-fill
    .b2-arrow-drop-down-fill
  • arrow-drop-left-fill
    .b2-arrow-drop-left-fill
  • arrow-drop-up-fill
    .b2-arrow-drop-up-fill
  • arrow-go-back-line
    .b2-arrow-go-back-line
  • arrow-go-forward-line
    .b2-arrow-go-forward-line
  • arrow-up-line
    .b2-arrow-up-line
  • zoom-in-line
    .b2-zoom-in-line
  • rotate-lock-fill
    .b2-rotate-lock-fill
  • lock-2-line
    .b2-lock-2-line
  • indeterminate-circle-line
    .b2-indeterminate-circle-line
  • bar-chart-fill
    .b2-bar-chart-fill
  • heart-pulse-line
    .b2-heart-pulse-line
  • chat-heart-line
    .b2-chat-heart-line
  • chat-poll-line
    .b2-chat-poll-line
  • chat-quote-line
    .b2-chat-quote-line
  • double-quotes-l
    .b2-double-quotes-l
  • emotion-line
    .b2-emotion-line
  • hashtag
    .b2-hashtag
  • parent-line
    .b2-parent-line
  • arrow-right-s-fill
    .b2-arrow-right-s-fill
  • customer-service-2-line
    .b2-customer-service-2-line
  • chat-smile-2-line
    .b2-chat-smile-2-line
  • arrow-left-right-fill
    .b2-arrow-left-right-fill
  • profile-fill
    .b2-profile-fill
  • file-3-fill
    .b2-file-3-fill
  • movie-fill
    .b2-movie-fill
  • close-circle-fill
    .b2-close-circle-fill
  • close-circle-line
    .b2-close-circle-line
  • checkbox-circle-fill
    .b2-checkbox-circle-fill
  • checkbox-circle-line
    .b2-checkbox-circle-line
  • whatsapp-line
    .b2-whatsapp-line
  • filter-2-line
    .b2-filter-2-line
  • 我的购物车
    .b2-wodegouwuche
  • 付款成功账单
    .b2-fukuanchenggongzhangdan
  • 结算3
    .b2-jiesuan
  • exchange-cny-line
    .b2-exchange-cny-line
  • 咖啡 等待
    .b2-waiting
  • check-double-line
    .b2-check-double-line
  • map-pin-fill
    .b2-map-pin-fill
  • bank-card-fill
    .b2-bank-card-fill
  • coins-fill
    .b2-coins-fill
  • vip-line
    .b2-vip-line
  • alipay-fill
    .b2-alipay-fill
  • paypal-fill
    .b2-paypal-fill
  • wechat-pay-fill
    .b2-wechat-pay-fill
  • .b2-tang
  • star-line
    .b2-star-line
  • edit-2-line
    .b2-edit-2-line
  • share-forward-fill
    .b2-share-forward-fill
  • star-fill
    .b2-star-fill
  • price-tag-3-line
    .b2-price-tag-3-line
  • play-mini-fill
    .b2-play-mini-fill
  • rhythm-line
    .b2-rhythm-line
  • download
    .b2-download1
  • video
    .b2-caozuoshili
  • .b2-suo1
  • lock-2-fill
    .b2-lock-2-fill
  • chat-2-fill
    .b2-chat-2-fill
  • play-circle-line
    .b2-play-circle-line
  • message-3-fill
    .b2-message-3-fill
  • login-circle-line
    .b2-login-circle-line
  • user-settings-line
    .b2-user-settings-line
  • skull-2-line
    .b2-skull-2-line
  • vip-crown-2-line
    .b2-vip-crown-2-line
  • vip-diamond-line
    .b2-vip-diamond-line
  • task-line
    .b2-task-line
  • share-line
    .b2-share-line
  • bit-coin-line
    .b2-bit-coin-line
  • coins-line
    .b2-coins-line
  • add-circle-line
    .b2-add-circle-line
  • notification-badge-line
    .b2-notification-badge-line
  • qr-code-fill
    .b2-qr-code-fill
  • gift-2-line
    .b2-gift-2-line
  • coupon-2-line
    .b2-coupon-2-line
  • shopping-cart-2-line
    .b2-shopping-cart-2-line
  • pages-line
    .b2-pages-line
  • eye-fill
    .b2-eye-fill
  • download-cloud-line
    .b2-download-cloud-line
  • coin-line
    .b2-coin-line
  • git-repository-private-line
    .b2-git-repository-private-line
  • information-line
    .b2-information-line
  • 不喜欢
    .b2-dislike-fill
  • heart-fill
    .b2-heart-fill
  • thumb-down-line
    .b2-thumb-down-line
  • thumb-up-line
    .b2-thumb-up-line
  • donut-chart-fill
    .b2-donut-chart-fill
  • chat-smile-3-line
    .b2-chat-smile-3-line
  • clipboard-line
    .b2-clipboard-line
  • close-line
    .b2-close-line
  • question-line
    .b2-question-line
  • blaze-line
    .b2-blaze-line
  • flashlight-line
    .b2-flashlight-line
  • rocket-2-line
    .b2-rocket-2-line
  • home-heart-line
    .b2-home-heart-line
  • bookmark-3-line
    .b2-bookmark-3-line
  • questionnaire-line
    .b2-questionnaire-line
  • notification-3-line
    .b2-notification-3-line
  • menu-fill
    .b2-menu-fill
  • shield-user-line
    .b2-shield-user-line
  • database-2-line
    .b2-database-2-line
  • emotion-laugh-line
    .b2-emotion-laugh-line
  • emotion-normal-line
    .b2-emotion-normal-line
  • arrow-down-s-line
    .b2-arrow-down-s-line
  • arrow-left-s-line
    .b2-arrow-left-s-line
  • arrow-right-s-line
    .b2-arrow-right-s-line
  • arrow-up-s-line
    .b2-arrow-up-s-line
  • mail-send-line
    .b2-mail-send-line
  • quill-pen-line
    .b2-quill-pen-line
  • file-list-2-line
    .b2-file-list-2-line
  • folder-add-line
    .b2-folder-add-line
  • hand-heart-line
    .b2-hand-heart-line
  • dislike-line
    .b2-dislike-line
  • heart-add-line
    .b2-heart-add-line
  • hearts-line
    .b2-hearts-line
  • settings-3-line
    .b2-settings-3-line
  • account-circle-line
    .b2-account-circle-line
  • user-heart-line
    .b2-user-heart-line
  • add-line
    .b2-add-line
  • subtract-line
    .b2-subtract-line
  • pantone-line
    .b2-pantone-line
  • exchange-box-line
    .b2-exchange-box-line
  • shopping-bag-line
    .b2-shopping-bag-line
  • share-forward-box-fill
    .b2-share-forward-box-fill
  • qq-line
    .b2-qq-line
  • wechat-line
    .b2-wechat-line
  • weibo-line
    .b2-weibo-line
  • funds-box-line
    .b2-funds-box-line1
  • funds-box-line
    .b2-funds-box-line
  • external-link-line
    .b2-external-link-line
  • image-fill
    .b2-image-fill
  • search-line
    .b2-search-line

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="b2font b2-xxx"></span>

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

  • brush-line
    #b2-brush-line
  • mark-pen-line
    #b2-mark-pen-line
  • eraser-fill
    #b2-eraser-fill
  • magic-fill
    #b2-magic-fill
  • font-size-2
    #b2-font-size-2
  • landscape-line
    #b2-landscape-line
  • rmb
    #b2-rmb
  • flashlight-fill
    #b2-flashlight-fill
  • battery-2-charge-line
    #b2-battery-2-charge-line
  • battery-2-charge-fill
    #b2-battery-2-charge-fill
  • qq-fill
    #b2-qq
  • wechat-fill
    #b2-weixin
  • weibo-fill
    #b2-weibo
  • eye-off-fill
    #b2-eye-off-fill
  • stop-mini-fill
    #b2-stop-mini-fill
  • chat-2-line
    #b2-chat-2-line
  • money-cny-circle-line
    #b2-money-cny-circle-line
  • 实心地球
    #b2-shixindiqiu
  • v认证管理
    #b2-vrenzhengguanli
  • article-line
    #b2-article-line
  • men-line
    #b2-men-line
  • women-line
    #b2-women-line
  • check-line
    #b2-check-line
  • upload-fill
    #b2-upload-fill
  • more-line
    #b2-more-line
  • arrow-drop-down-fill
    #b2-arrow-drop-down-fill
  • arrow-drop-left-fill
    #b2-arrow-drop-left-fill
  • arrow-drop-up-fill
    #b2-arrow-drop-up-fill
  • arrow-go-back-line
    #b2-arrow-go-back-line
  • arrow-go-forward-line
    #b2-arrow-go-forward-line
  • arrow-up-line
    #b2-arrow-up-line
  • zoom-in-line
    #b2-zoom-in-line
  • rotate-lock-fill
    #b2-rotate-lock-fill
  • lock-2-line
    #b2-lock-2-line
  • indeterminate-circle-line
    #b2-indeterminate-circle-line
  • bar-chart-fill
    #b2-bar-chart-fill
  • heart-pulse-line
    #b2-heart-pulse-line
  • chat-heart-line
    #b2-chat-heart-line
  • chat-poll-line
    #b2-chat-poll-line
  • chat-quote-line
    #b2-chat-quote-line
  • double-quotes-l
    #b2-double-quotes-l
  • emotion-line
    #b2-emotion-line
  • hashtag
    #b2-hashtag
  • parent-line
    #b2-parent-line
  • arrow-right-s-fill
    #b2-arrow-right-s-fill
  • customer-service-2-line
    #b2-customer-service-2-line
  • chat-smile-2-line
    #b2-chat-smile-2-line
  • arrow-left-right-fill
    #b2-arrow-left-right-fill
  • profile-fill
    #b2-profile-fill
  • file-3-fill
    #b2-file-3-fill
  • movie-fill
    #b2-movie-fill
  • close-circle-fill
    #b2-close-circle-fill
  • close-circle-line
    #b2-close-circle-line
  • checkbox-circle-fill
    #b2-checkbox-circle-fill
  • checkbox-circle-line
    #b2-checkbox-circle-line
  • whatsapp-line
    #b2-whatsapp-line
  • filter-2-line
    #b2-filter-2-line
  • 我的购物车
    #b2-wodegouwuche
  • 付款成功账单
    #b2-fukuanchenggongzhangdan
  • 结算3
    #b2-jiesuan
  • exchange-cny-line
    #b2-exchange-cny-line
  • 咖啡 等待
    #b2-waiting
  • check-double-line
    #b2-check-double-line
  • map-pin-fill
    #b2-map-pin-fill
  • bank-card-fill
    #b2-bank-card-fill
  • coins-fill
    #b2-coins-fill
  • vip-line
    #b2-vip-line
  • alipay-fill
    #b2-alipay-fill
  • paypal-fill
    #b2-paypal-fill
  • wechat-pay-fill
    #b2-wechat-pay-fill
  • #b2-tang
  • star-line
    #b2-star-line
  • edit-2-line
    #b2-edit-2-line
  • share-forward-fill
    #b2-share-forward-fill
  • star-fill
    #b2-star-fill
  • price-tag-3-line
    #b2-price-tag-3-line
  • play-mini-fill
    #b2-play-mini-fill
  • rhythm-line
    #b2-rhythm-line
  • download
    #b2-download1
  • video
    #b2-caozuoshili
  • #b2-suo1
  • lock-2-fill
    #b2-lock-2-fill
  • chat-2-fill
    #b2-chat-2-fill
  • play-circle-line
    #b2-play-circle-line
  • message-3-fill
    #b2-message-3-fill
  • login-circle-line
    #b2-login-circle-line
  • user-settings-line
    #b2-user-settings-line
  • skull-2-line
    #b2-skull-2-line
  • vip-crown-2-line
    #b2-vip-crown-2-line
  • vip-diamond-line
    #b2-vip-diamond-line
  • task-line
    #b2-task-line
  • share-line
    #b2-share-line
  • bit-coin-line
    #b2-bit-coin-line
  • coins-line
    #b2-coins-line
  • add-circle-line
    #b2-add-circle-line
  • notification-badge-line
    #b2-notification-badge-line
  • qr-code-fill
    #b2-qr-code-fill
  • gift-2-line
    #b2-gift-2-line
  • coupon-2-line
    #b2-coupon-2-line
  • shopping-cart-2-line
    #b2-shopping-cart-2-line
  • pages-line
    #b2-pages-line
  • eye-fill
    #b2-eye-fill
  • download-cloud-line
    #b2-download-cloud-line
  • coin-line
    #b2-coin-line
  • git-repository-private-line
    #b2-git-repository-private-line
  • information-line
    #b2-information-line
  • 不喜欢
    #b2-dislike-fill
  • heart-fill
    #b2-heart-fill
  • thumb-down-line
    #b2-thumb-down-line
  • thumb-up-line
    #b2-thumb-up-line
  • donut-chart-fill
    #b2-donut-chart-fill
  • chat-smile-3-line
    #b2-chat-smile-3-line
  • clipboard-line
    #b2-clipboard-line
  • close-line
    #b2-close-line
  • question-line
    #b2-question-line
  • blaze-line
    #b2-blaze-line
  • flashlight-line
    #b2-flashlight-line
  • rocket-2-line
    #b2-rocket-2-line
  • home-heart-line
    #b2-home-heart-line
  • bookmark-3-line
    #b2-bookmark-3-line
  • questionnaire-line
    #b2-questionnaire-line
  • notification-3-line
    #b2-notification-3-line
  • menu-fill
    #b2-menu-fill
  • shield-user-line
    #b2-shield-user-line
  • database-2-line
    #b2-database-2-line
  • emotion-laugh-line
    #b2-emotion-laugh-line
  • emotion-normal-line
    #b2-emotion-normal-line
  • arrow-down-s-line
    #b2-arrow-down-s-line
  • arrow-left-s-line
    #b2-arrow-left-s-line
  • arrow-right-s-line
    #b2-arrow-right-s-line
  • arrow-up-s-line
    #b2-arrow-up-s-line
  • mail-send-line
    #b2-mail-send-line
  • quill-pen-line
    #b2-quill-pen-line
  • file-list-2-line
    #b2-file-list-2-line
  • folder-add-line
    #b2-folder-add-line
  • hand-heart-line
    #b2-hand-heart-line
  • dislike-line
    #b2-dislike-line
  • heart-add-line
    #b2-heart-add-line
  • hearts-line
    #b2-hearts-line
  • settings-3-line
    #b2-settings-3-line
  • account-circle-line
    #b2-account-circle-line
  • user-heart-line
    #b2-user-heart-line
  • add-line
    #b2-add-line
  • subtract-line
    #b2-subtract-line
  • pantone-line
    #b2-pantone-line
  • exchange-box-line
    #b2-exchange-box-line
  • shopping-bag-line
    #b2-shopping-bag-line
  • share-forward-box-fill
    #b2-share-forward-box-fill
  • qq-line
    #b2-qq-line
  • wechat-line
    #b2-wechat-line
  • weibo-line
    #b2-weibo-line
  • funds-box-line
    #b2-funds-box-line1
  • funds-box-line
    #b2-funds-box-line
  • external-link-line
    #b2-external-link-line
  • image-fill
    #b2-image-fill
  • search-line
    #b2-search-line

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>