• bug-report
    
  • card-giftcard
    
  • explore
    
  • flight-takeoff
    
  • g-translate
    
  • http
    
  • language
    
  • room
    
  • shopping-basket
    
  • store
    
  • today
    
  • translate
    
  • trending-up
    
  • verified-user
    
  • album
    
  • radio
    
  • airplanemode-active
    
  • headset
    
  • keyboard
    
  • laptop
    
  • 
    mouse
    
  • phone-iphone
    
  • security
    
  • speaker
    
  • tv
    
  • toys
    
  • videogame-asset
    
  • watch
    
  • brush
    
  • collections
    
  • color-lens
    
  • musnote
    
  • palette
    
  • flight
    
  • local-activity
    
  • local-atm
    
  • local-bar
    
  • local-cafe
    
  • local-florist
    
  • local-taxi
    
  • restaurant-menu
    
  • restaurant
    
  • terrain
    
  • subway
    
  • train
    
  • time-to-leave
    
  • 
    airport-shuttle
    
  • beach-access
    
  • golf-course
    
  • spa
    
  • cake
    
  • publ48px
    
  • school
    
  • whatshot
    
  • 地图
    
  • 
  • 沙尘暴
    
  • 沙尘
    
  • 强沙尘暴
    
  • 扬沙
    
  • 
  • 大雨
    
  • 多云
    
  • 多云转阴
    
  • 小雨
    
  • 中雨
    
  • 暴雨
    
  • 
  • 雷阵雨
    
  • 雾霾
    
  • 小雪
    
  • 暴雪
    
  • 冰雹
    
  • 大雪
    
  • 雷阵雪
    
  • 雨夹雪
    
  • 中雪
    
  • 
  • 沙尘
    
  • 沙尘暴
    
  • 台风
    
  • PM2.5
    
  • 空气质量
    
  • 天猫超市-购物车
    
  • 3.1购物车-选中
    
  • 模块
    
  • 文章
    
  • 代码
    
  • 编辑
    
  • 复制
    
  • 设置
    
  • 用户
    
  • 首页
    
  • 图片列表
    
  • 记事本
    
  • 活动
    
  • 热门
    
  • 链接
    
  • 简历
    
  • 公文包
    
  • 日历
    
  • 计算器
    
  • 价格
    
  • 阅读
    
  • 
  • 购物车
    
  • 新闻
    
  • 搜索
    
  • 店铺
    
  • 收藏
    
  • 电话
    
  • 眼睛
    
  • 视频
    
  • 相机
    
  • 帮助
    
  • 键盘
    
  • 钱包
    
  • 利润
    
  • instagram
    
  • raspberrypi
    
  • ie-line
    
  • instagram-line
    
  • github-line
    
  • linkedin-fill
    
  • linkedin-box-line
    
  • linkedin-box-fill
    
  • linkedin-line
    
  • mastercard-line
    
  • google-line
    
  • evernote-fill
    
  • firefox-fill
    
  • mastercard-fill
    
  • opera-fill
    
  • netflix-fill
    
  • google-fill
    
  • paypal-line
    
  • playstation-fill
    
  • qq-fill
    
  • reactjs-fill
    
  • safari-fill
    
  • reactjs-line
    
  • safari-line
    
  • skype-fill
    
  • spotify-line
    
  • stack-overflow-fill
    
  • spotify-fill
    
  • reddit-line
    
  • telegram-fill
    
  • stack-overflow-line
    
  • taobao-line
    
  • tumblr-line
    
  • tumblr-fill
    
  • taobao-fill
    
  • twitter-fill
    
  • twitch-fill
    
  • switch-fill
    
  • ubuntu-fill
    
  • vuejs-fill
    
  • ubuntu-line
    
  • twitter-line
    
  • wechat-2-fill
    
  • wechat-2-line
    
  • windows-fill
    
  • wechat-fill
    
  • weibo-line
    
  • switch-line
    
  • wechat-line
    
  • weibo-fill
    
  • whatsapp-fill
    
  • whatsapp-line
    
  • xbox-line
    
  • xbox-fill
    
  • youtube-line
    
  • zhihu-line
    
  • zhihu-fill
    
  • vuejs-line
    
  • wechat-pay-line
    
  • alipay-line
    
  • alipay-fill
    
  • angularjs-line
    
  • android-fill
    
  • angularjs-fill
    
  • apple-fill
    
  • amazon-line
    
  • amazon-fill
    
  • chrome-fill
    
  • apple-line
    
  • baidu-fill
    
  • bilibili-fill
    
  • bilibili-line
    
  • baidu-line
    
  • dingding-fill
    
  • douban-line
    
  • edge-fill
    
  • dropbox-fill
    
  • edge-line
    
  • evernote-line
    
  • dingding-line
    
  • douban-fill
    
  • dropbox-line
    
  • github-fill
    
  • gitlab-fill
    
  • chrome-line
    
  • gitlab-line
    
  • firefox-line
    
  • ie-fill
    
  • viber
    
  • adobeaftereffects
    
  • adobeindesign
    
  • playerme
    
  • dribbble
    
  • gitter
    
  • justgiving
    
  • microsoftonenote
    
  • graphql
    
  • podcasts
    
  • angular
    
  • foursquare
    
  • macys
    
  • mastercard
    
  • nintendoswitch
    
  • pinterest
    
  • twilio
    
  • sinaweibo
    
  • microsoftaccess
    
  • netflix
    
  • airbnb
    
  • ebay
    
  • npm
    
  • tinder
    
  • youtube
    
  • tesla
    
  • flipboard
    
  • ted
    
  • jenkins
    
  • redis
    
  • git
    
  • gitlab
    
  • adobeacrobatreader
    
  • gmail
    
  • swift
    
  • ubuntu
    
  • html5
    
  • stackoverflow
    
  • sogou
    
  • sparkpost
    
  • rss
    
  • mozillafirefox
    
  • amazon
    
  • xbox
    
  • empirekred
    
  • wechat
    
  • javascript
    
  • spreaker
    
  • linux
    
  • vim
    
  • nginx
    
  • hulu
    
  • line
    
  • nodejs
    
  • bing
    
  • mongodb
    
  • tripadvisor
    
  • vuejs
    
  • googlehangouts
    
  • slack
    
  • kickstarter
    
  • spotify
    
  • wordpress
    
  • tencentqq
    
  • skype
    
  • vimeo
    
  • react
    
  • visualstudiocode
    
  • microsoftoutlook
    
  • twitter
    
  • docker
    
  • googleplay
    
  • webpack
    
  • 500px
    
  • telegram
    
  • python
    
  • jsfiddle
    
  • ifixit
    
  • buffer
    
  • paypal
    
  • windows
    
  • intel
    
  • readthedocs
    
  • baidu
    
  • php
    
  • visa
    
  • google
    
  • googledrive
    
  • onedrive
    
  • playstation
    
  • jira
    
  • dropbox
    
  • xcode
    
  • microsoftword
    
  • github
    
  • instapaper
    
  • django
    
  • sublimetext
    
  • microsoft
    
  • apple
    
  • yahoo
    
  • bootstrap
    
  • mozilla
    
  • steam
    
  • wikipedia
    
  • vsco
    
  • applemusic
    

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

  • bug-report
    .icon-bug-report
  • card-giftcard
    .icon-card-giftcard
  • explore
    .icon-explore
  • flight-takeoff
    .icon-flight-takeoff
  • g-translate
    .icon-g-translate
  • http
    .icon-http
  • language
    .icon-language
  • room
    .icon-room
  • shopping-basket
    .icon-shopping-basket
  • store
    .icon-store
  • today
    .icon-today
  • translate
    .icon-translate
  • trending-up
    .icon-trending-up
  • verified-user
    .icon-verified-user
  • album
    .icon-album
  • radio
    .icon-radio
  • airplanemode-active
    .icon-airplanemode-active
  • headset
    .icon-headset
  • keyboard
    .icon-keyboard
  • laptop
    .icon-laptop
  • mouse
    .icon-mouse
  • phone-iphone
    .icon-phone-iphone
  • security
    .icon-security
  • speaker
    .icon-speaker
  • tv
    .icon-tv
  • toys
    .icon-toys
  • videogame-asset
    .icon-videogame-asset
  • watch
    .icon-watch
  • brush
    .icon-brush
  • collections
    .icon-collections
  • color-lens
    .icon-color-lens
  • musnote
    .icon-musnote
  • palette
    .icon-palette
  • flight
    .icon-flight
  • local-activity
    .icon-local-activity
  • local-atm
    .icon-local-atm
  • local-bar
    .icon-local-bar
  • local-cafe
    .icon-local-cafe
  • local-florist
    .icon-local-florist
  • local-taxi
    .icon-local-taxi
  • restaurant-menu
    .icon-restaurant-menu
  • restaurant
    .icon-restaurant
  • terrain
    .icon-terrain
  • subway
    .icon-subway
  • train
    .icon-train
  • time-to-leave
    .icon-time-to-leave
  • airport-shuttle
    .icon-airport-shuttle
  • beach-access
    .icon-beach-access
  • golf-course
    .icon-golf-course
  • spa
    .icon-spa
  • cake
    .icon-cake
  • publ48px
    .icon-publpx
  • school
    .icon-school
  • whatshot
    .icon-whatshot
  • 地图
    .icon-ditu
  • .icon-qing
  • 沙尘暴
    .icon-shachenbao
  • 沙尘
    .icon-shachen
  • 强沙尘暴
    .icon-qiangshachenbao
  • 扬沙
    .icon-yangsha
  • .icon-mai
  • 大雨
    .icon-dayu
  • 多云
    .icon-duoyun
  • 多云转阴
    .icon-duoyunzhuanyin
  • 小雨
    .icon-xiaoyu
  • 中雨
    .icon-zhongyu
  • 暴雨
    .icon-baoyu
  • .icon-wu
  • 雷阵雨
    .icon-leizhenyu
  • 雾霾
    .icon-wumai
  • 小雪
    .icon-xiaoxue
  • 暴雪
    .icon-baoxue
  • 冰雹
    .icon-bingbao
  • 大雪
    .icon-daxue
  • 雷阵雪
    .icon-leizhenxue
  • 雨夹雪
    .icon-yujiaxue
  • 中雪
    .icon-zhongxue
  • .icon-feng
  • 沙尘
    .icon-shachen1
  • 沙尘暴
    .icon-shachengbao
  • 台风
    .icon-taifeng
  • PM2.5
    .icon-PM
  • 空气质量
    .icon-app_icons--
  • 天猫超市-购物车
    .icon-cart
  • 3.1购物车-选中
    .icon-cart-fill
  • 模块
    .icon-ai-module
  • 文章
    .icon-ai-article
  • 代码
    .icon-ai-code
  • 编辑
    .icon-ai-edit
  • 复制
    .icon-ai-copy
  • 设置
    .icon-ai-set
  • 用户
    .icon-ai-user
  • 首页
    .icon-ai-home
  • 图片列表
    .icon-ai-img-list
  • 记事本
    .icon-work-copy
  • 活动
    .icon-huodong-copy
  • 热门
    .icon-ai-hot
  • 链接
    .icon-ai-link
  • 简历
    .icon-ai-resume
  • 公文包
    .icon-ai-briefcase
  • 日历
    .icon-ai-calendar
  • 计算器
    .icon-ai-calculator
  • 价格
    .icon-jiageprice1-copy
  • 阅读
    .icon-yuedureading19-copy
  • .icon-ai-book
  • 购物车
    .icon-ai-cart
  • 新闻
    .icon-ai-new
  • 搜索
    .icon-ai-search
  • 店铺
    .icon-dianpu-copy
  • 收藏
    .icon-ai-mark
  • 电话
    .icon-ai-tel
  • 眼睛
    .icon-ai-eye
  • 视频
    .icon-ai-video
  • 相机
    .icon-ai-camera
  • 帮助
    .icon-ai-i
  • 键盘
    .icon-ai-keyboard
  • 钱包
    .icon-ai-wallet
  • 利润
    .icon-ai-profit
  • instagram
    .icon-instagram
  • raspberrypi
    .icon-raspberrypi
  • ie-line
    .icon-ie-line
  • instagram-line
    .icon-instagram-line
  • github-line
    .icon-github-line
  • linkedin-fill
    .icon-linkedin-fill
  • linkedin-box-line
    .icon-linkedin-box-line
  • linkedin-box-fill
    .icon-linkedin-box-fill
  • linkedin-line
    .icon-linkedin-line
  • mastercard-line
    .icon-mastercard-line
  • google-line
    .icon-google-line
  • evernote-fill
    .icon-evernote-fill
  • firefox-fill
    .icon-firefox-fill
  • mastercard-fill
    .icon-mastercard-fill
  • opera-fill
    .icon-opera-fill
  • netflix-fill
    .icon-netflix-fill
  • google-fill
    .icon-google-fill
  • paypal-line
    .icon-paypal-line
  • playstation-fill
    .icon-playstation-fill
  • qq-fill
    .icon-qq-fill
  • reactjs-fill
    .icon-reactjs-fill
  • safari-fill
    .icon-safari-fill
  • reactjs-line
    .icon-reactjs-line
  • safari-line
    .icon-safari-line
  • skype-fill
    .icon-skype-fill
  • spotify-line
    .icon-spotify-line
  • stack-overflow-fill
    .icon-stack-overflow-fill
  • spotify-fill
    .icon-spotify-fill
  • reddit-line
    .icon-reddit-line
  • telegram-fill
    .icon-telegram-fill
  • stack-overflow-line
    .icon-stack-overflow-line
  • taobao-line
    .icon-taobao-line
  • tumblr-line
    .icon-tumblr-line
  • tumblr-fill
    .icon-tumblr-fill
  • taobao-fill
    .icon-taobao-fill
  • twitter-fill
    .icon-twitter-fill
  • twitch-fill
    .icon-twitch-fill
  • switch-fill
    .icon-switch-fill
  • ubuntu-fill
    .icon-ubuntu-fill
  • vuejs-fill
    .icon-vuejs-fill
  • ubuntu-line
    .icon-ubuntu-line
  • twitter-line
    .icon-twitter-line
  • wechat-2-fill
    .icon-wechat--fill
  • wechat-2-line
    .icon-wechat--line
  • windows-fill
    .icon-windows-fill
  • wechat-fill
    .icon-wechat-fill
  • weibo-line
    .icon-weibo-line
  • switch-line
    .icon-switch-line
  • wechat-line
    .icon-wechat-line
  • weibo-fill
    .icon-weibo-fill
  • whatsapp-fill
    .icon-whatsapp-fill
  • whatsapp-line
    .icon-whatsapp-line
  • xbox-line
    .icon-xbox-line
  • xbox-fill
    .icon-xbox-fill
  • youtube-line
    .icon-youtube-line
  • zhihu-line
    .icon-zhihu-line
  • zhihu-fill
    .icon-zhihu-fill
  • vuejs-line
    .icon-vuejs-line
  • wechat-pay-line
    .icon-wechat-pay-line
  • alipay-line
    .icon-alipay-line
  • alipay-fill
    .icon-alipay-fill
  • angularjs-line
    .icon-angularjs-line
  • android-fill
    .icon-android-fill
  • angularjs-fill
    .icon-angularjs-fill
  • apple-fill
    .icon-apple-fill
  • amazon-line
    .icon-amazon-line
  • amazon-fill
    .icon-amazon-fill
  • chrome-fill
    .icon-chrome-fill
  • apple-line
    .icon-apple-line
  • baidu-fill
    .icon-baidu-fill
  • bilibili-fill
    .icon-bilibili-fill
  • bilibili-line
    .icon-bilibili-line
  • baidu-line
    .icon-baidu-line
  • dingding-fill
    .icon-dingding-fill
  • douban-line
    .icon-douban-line
  • edge-fill
    .icon-edge-fill
  • dropbox-fill
    .icon-dropbox-fill
  • edge-line
    .icon-edge-line
  • evernote-line
    .icon-evernote-line
  • dingding-line
    .icon-dingding-line
  • douban-fill
    .icon-douban-fill
  • dropbox-line
    .icon-dropbox-line
  • github-fill
    .icon-github-fill
  • gitlab-fill
    .icon-gitlab-fill
  • chrome-line
    .icon-chrome-line
  • gitlab-line
    .icon-gitlab-line
  • firefox-line
    .icon-firefox-line
  • ie-fill
    .icon-ie-fill
  • viber
    .icon-viber
  • adobeaftereffects
    .icon-adobeaftereffects
  • adobeindesign
    .icon-adobeindesign
  • playerme
    .icon-playerme
  • dribbble
    .icon-dribbble
  • gitter
    .icon-gitter
  • justgiving
    .icon-justgiving
  • microsoftonenote
    .icon-microsoftonenote
  • graphql
    .icon-graphql
  • podcasts
    .icon-podcasts
  • angular
    .icon-angular
  • foursquare
    .icon-foursquare
  • macys
    .icon-macys
  • mastercard
    .icon-mastercard
  • nintendoswitch
    .icon-nintendoswitch
  • pinterest
    .icon-pinterest
  • twilio
    .icon-twilio
  • sinaweibo
    .icon-sinaweibo
  • microsoftaccess
    .icon-microsoftaccess
  • netflix
    .icon-netflix
  • airbnb
    .icon-airbnb
  • ebay
    .icon-ebay
  • npm
    .icon-npm
  • tinder
    .icon-tinder
  • youtube
    .icon-youtube
  • tesla
    .icon-tesla
  • flipboard
    .icon-flipboard
  • ted
    .icon-ted
  • jenkins
    .icon-jenkins
  • redis
    .icon-redis
  • git
    .icon-git
  • gitlab
    .icon-gitlab
  • adobeacrobatreader
    .icon-adobeacrobatreader
  • gmail
    .icon-gmail
  • swift
    .icon-swift
  • ubuntu
    .icon-ubuntu
  • html5
    .icon-html
  • stackoverflow
    .icon-stackoverflow
  • sogou
    .icon-sogou
  • sparkpost
    .icon-sparkpost
  • rss
    .icon-rss
  • mozillafirefox
    .icon-mozillafirefox
  • amazon
    .icon-amazon
  • xbox
    .icon-xbox
  • empirekred
    .icon-empirekred
  • wechat
    .icon-wechat
  • javascript
    .icon-javascript
  • spreaker
    .icon-spreaker
  • linux
    .icon-linux
  • vim
    .icon-vim
  • nginx
    .icon-nginx
  • hulu
    .icon-hulu
  • line
    .icon-line
  • nodejs
    .icon-nodejs
  • bing
    .icon-bing
  • mongodb
    .icon-mongodb
  • tripadvisor
    .icon-tripadvisor
  • vuejs
    .icon-vuejs
  • googlehangouts
    .icon-googlehangouts
  • slack
    .icon-slack
  • kickstarter
    .icon-kickstarter
  • spotify
    .icon-spotify
  • wordpress
    .icon-wordpress
  • tencentqq
    .icon-tencentqq
  • skype
    .icon-skype
  • vimeo
    .icon-vimeo
  • react
    .icon-react
  • visualstudiocode
    .icon-visualstudiocode
  • microsoftoutlook
    .icon-microsoftoutlook
  • twitter
    .icon-twitter
  • docker
    .icon-docker
  • googleplay
    .icon-googleplay
  • webpack
    .icon-webpack
  • 500px
    .icon-px
  • telegram
    .icon-telegram
  • python
    .icon-python
  • jsfiddle
    .icon-jsfiddle
  • ifixit
    .icon-ifixit
  • buffer
    .icon-buffer
  • paypal
    .icon-paypal
  • windows
    .icon-windows
  • intel
    .icon-intel
  • readthedocs
    .icon-readthedocs
  • baidu
    .icon-baidu
  • php
    .icon-php
  • visa
    .icon-visa
  • google
    .icon-google
  • googledrive
    .icon-googledrive
  • onedrive
    .icon-onedrive
  • playstation
    .icon-playstation
  • jira
    .icon-jira
  • dropbox
    .icon-dropbox
  • xcode
    .icon-xcode
  • microsoftword
    .icon-microsoftword
  • github
    .icon-github
  • instapaper
    .icon-instapaper
  • django
    .icon-django
  • sublimetext
    .icon-sublimetext
  • microsoft
    .icon-microsoft
  • apple
    .icon-apple
  • yahoo
    .icon-yahoo
  • bootstrap
    .icon-bootstrap
  • mozilla
    .icon-mozilla
  • steam
    .icon-steam
  • wikipedia
    .icon-wikipedia
  • vsco
    .icon-vsco
  • applemusic
    .icon-applemusic

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • bug-report
    #icon-bug-report
  • card-giftcard
    #icon-card-giftcard
  • explore
    #icon-explore
  • flight-takeoff
    #icon-flight-takeoff
  • g-translate
    #icon-g-translate
  • http
    #icon-http
  • language
    #icon-language
  • room
    #icon-room
  • shopping-basket
    #icon-shopping-basket
  • store
    #icon-store
  • today
    #icon-today
  • translate
    #icon-translate
  • trending-up
    #icon-trending-up
  • verified-user
    #icon-verified-user
  • album
    #icon-album
  • radio
    #icon-radio
  • airplanemode-active
    #icon-airplanemode-active
  • headset
    #icon-headset
  • keyboard
    #icon-keyboard
  • laptop
    #icon-laptop
  • mouse
    #icon-mouse
  • phone-iphone
    #icon-phone-iphone
  • security
    #icon-security
  • speaker
    #icon-speaker
  • tv
    #icon-tv
  • toys
    #icon-toys
  • videogame-asset
    #icon-videogame-asset
  • watch
    #icon-watch
  • brush
    #icon-brush
  • collections
    #icon-collections
  • color-lens
    #icon-color-lens
  • musnote
    #icon-musnote
  • palette
    #icon-palette
  • flight
    #icon-flight
  • local-activity
    #icon-local-activity
  • local-atm
    #icon-local-atm
  • local-bar
    #icon-local-bar
  • local-cafe
    #icon-local-cafe
  • local-florist
    #icon-local-florist
  • local-taxi
    #icon-local-taxi
  • restaurant-menu
    #icon-restaurant-menu
  • restaurant
    #icon-restaurant
  • terrain
    #icon-terrain
  • subway
    #icon-subway
  • train
    #icon-train
  • time-to-leave
    #icon-time-to-leave
  • airport-shuttle
    #icon-airport-shuttle
  • beach-access
    #icon-beach-access
  • golf-course
    #icon-golf-course
  • spa
    #icon-spa
  • cake
    #icon-cake
  • publ48px
    #icon-publpx
  • school
    #icon-school
  • whatshot
    #icon-whatshot
  • 地图
    #icon-ditu
  • #icon-qing
  • 沙尘暴
    #icon-shachenbao
  • 沙尘
    #icon-shachen
  • 强沙尘暴
    #icon-qiangshachenbao
  • 扬沙
    #icon-yangsha
  • #icon-mai
  • 大雨
    #icon-dayu
  • 多云
    #icon-duoyun
  • 多云转阴
    #icon-duoyunzhuanyin
  • 小雨
    #icon-xiaoyu
  • 中雨
    #icon-zhongyu
  • 暴雨
    #icon-baoyu
  • #icon-wu
  • 雷阵雨
    #icon-leizhenyu
  • 雾霾
    #icon-wumai
  • 小雪
    #icon-xiaoxue
  • 暴雪
    #icon-baoxue
  • 冰雹
    #icon-bingbao
  • 大雪
    #icon-daxue
  • 雷阵雪
    #icon-leizhenxue
  • 雨夹雪
    #icon-yujiaxue
  • 中雪
    #icon-zhongxue
  • #icon-feng
  • 沙尘
    #icon-shachen1
  • 沙尘暴
    #icon-shachengbao
  • 台风
    #icon-taifeng
  • PM2.5
    #icon-PM
  • 空气质量
    #icon-app_icons--
  • 天猫超市-购物车
    #icon-cart
  • 3.1购物车-选中
    #icon-cart-fill
  • 模块
    #icon-ai-module
  • 文章
    #icon-ai-article
  • 代码
    #icon-ai-code
  • 编辑
    #icon-ai-edit
  • 复制
    #icon-ai-copy
  • 设置
    #icon-ai-set
  • 用户
    #icon-ai-user
  • 首页
    #icon-ai-home
  • 图片列表
    #icon-ai-img-list
  • 记事本
    #icon-work-copy
  • 活动
    #icon-huodong-copy
  • 热门
    #icon-ai-hot
  • 链接
    #icon-ai-link
  • 简历
    #icon-ai-resume
  • 公文包
    #icon-ai-briefcase
  • 日历
    #icon-ai-calendar
  • 计算器
    #icon-ai-calculator
  • 价格
    #icon-jiageprice1-copy
  • 阅读
    #icon-yuedureading19-copy
  • #icon-ai-book
  • 购物车
    #icon-ai-cart
  • 新闻
    #icon-ai-new
  • 搜索
    #icon-ai-search
  • 店铺
    #icon-dianpu-copy
  • 收藏
    #icon-ai-mark
  • 电话
    #icon-ai-tel
  • 眼睛
    #icon-ai-eye
  • 视频
    #icon-ai-video
  • 相机
    #icon-ai-camera
  • 帮助
    #icon-ai-i
  • 键盘
    #icon-ai-keyboard
  • 钱包
    #icon-ai-wallet
  • 利润
    #icon-ai-profit
  • instagram
    #icon-instagram
  • raspberrypi
    #icon-raspberrypi
  • ie-line
    #icon-ie-line
  • instagram-line
    #icon-instagram-line
  • github-line
    #icon-github-line
  • linkedin-fill
    #icon-linkedin-fill
  • linkedin-box-line
    #icon-linkedin-box-line
  • linkedin-box-fill
    #icon-linkedin-box-fill
  • linkedin-line
    #icon-linkedin-line
  • mastercard-line
    #icon-mastercard-line
  • google-line
    #icon-google-line
  • evernote-fill
    #icon-evernote-fill
  • firefox-fill
    #icon-firefox-fill
  • mastercard-fill
    #icon-mastercard-fill
  • opera-fill
    #icon-opera-fill
  • netflix-fill
    #icon-netflix-fill
  • google-fill
    #icon-google-fill
  • paypal-line
    #icon-paypal-line
  • playstation-fill
    #icon-playstation-fill
  • qq-fill
    #icon-qq-fill
  • reactjs-fill
    #icon-reactjs-fill
  • safari-fill
    #icon-safari-fill
  • reactjs-line
    #icon-reactjs-line
  • safari-line
    #icon-safari-line
  • skype-fill
    #icon-skype-fill
  • spotify-line
    #icon-spotify-line
  • stack-overflow-fill
    #icon-stack-overflow-fill
  • spotify-fill
    #icon-spotify-fill
  • reddit-line
    #icon-reddit-line
  • telegram-fill
    #icon-telegram-fill
  • stack-overflow-line
    #icon-stack-overflow-line
  • taobao-line
    #icon-taobao-line
  • tumblr-line
    #icon-tumblr-line
  • tumblr-fill
    #icon-tumblr-fill
  • taobao-fill
    #icon-taobao-fill
  • twitter-fill
    #icon-twitter-fill
  • twitch-fill
    #icon-twitch-fill
  • switch-fill
    #icon-switch-fill
  • ubuntu-fill
    #icon-ubuntu-fill
  • vuejs-fill
    #icon-vuejs-fill
  • ubuntu-line
    #icon-ubuntu-line
  • twitter-line
    #icon-twitter-line
  • wechat-2-fill
    #icon-wechat--fill
  • wechat-2-line
    #icon-wechat--line
  • windows-fill
    #icon-windows-fill
  • wechat-fill
    #icon-wechat-fill
  • weibo-line
    #icon-weibo-line
  • switch-line
    #icon-switch-line
  • wechat-line
    #icon-wechat-line
  • weibo-fill
    #icon-weibo-fill
  • whatsapp-fill
    #icon-whatsapp-fill
  • whatsapp-line
    #icon-whatsapp-line
  • xbox-line
    #icon-xbox-line
  • xbox-fill
    #icon-xbox-fill
  • youtube-line
    #icon-youtube-line
  • zhihu-line
    #icon-zhihu-line
  • zhihu-fill
    #icon-zhihu-fill
  • vuejs-line
    #icon-vuejs-line
  • wechat-pay-line
    #icon-wechat-pay-line
  • alipay-line
    #icon-alipay-line
  • alipay-fill
    #icon-alipay-fill
  • angularjs-line
    #icon-angularjs-line
  • android-fill
    #icon-android-fill
  • angularjs-fill
    #icon-angularjs-fill
  • apple-fill
    #icon-apple-fill
  • amazon-line
    #icon-amazon-line
  • amazon-fill
    #icon-amazon-fill
  • chrome-fill
    #icon-chrome-fill
  • apple-line
    #icon-apple-line
  • baidu-fill
    #icon-baidu-fill
  • bilibili-fill
    #icon-bilibili-fill
  • bilibili-line
    #icon-bilibili-line
  • baidu-line
    #icon-baidu-line
  • dingding-fill
    #icon-dingding-fill
  • douban-line
    #icon-douban-line
  • edge-fill
    #icon-edge-fill
  • dropbox-fill
    #icon-dropbox-fill
  • edge-line
    #icon-edge-line
  • evernote-line
    #icon-evernote-line
  • dingding-line
    #icon-dingding-line
  • douban-fill
    #icon-douban-fill
  • dropbox-line
    #icon-dropbox-line
  • github-fill
    #icon-github-fill
  • gitlab-fill
    #icon-gitlab-fill
  • chrome-line
    #icon-chrome-line
  • gitlab-line
    #icon-gitlab-line
  • firefox-line
    #icon-firefox-line
  • ie-fill
    #icon-ie-fill
  • viber
    #icon-viber
  • adobeaftereffects
    #icon-adobeaftereffects
  • adobeindesign
    #icon-adobeindesign
  • playerme
    #icon-playerme
  • dribbble
    #icon-dribbble
  • gitter
    #icon-gitter
  • justgiving
    #icon-justgiving
  • microsoftonenote
    #icon-microsoftonenote
  • graphql
    #icon-graphql
  • podcasts
    #icon-podcasts
  • angular
    #icon-angular
  • foursquare
    #icon-foursquare
  • macys
    #icon-macys
  • mastercard
    #icon-mastercard
  • nintendoswitch
    #icon-nintendoswitch
  • pinterest
    #icon-pinterest
  • twilio
    #icon-twilio
  • sinaweibo
    #icon-sinaweibo
  • microsoftaccess
    #icon-microsoftaccess
  • netflix
    #icon-netflix
  • airbnb
    #icon-airbnb
  • ebay
    #icon-ebay
  • npm
    #icon-npm
  • tinder
    #icon-tinder
  • youtube
    #icon-youtube
  • tesla
    #icon-tesla
  • flipboard
    #icon-flipboard
  • ted
    #icon-ted
  • jenkins
    #icon-jenkins
  • redis
    #icon-redis
  • git
    #icon-git
  • gitlab
    #icon-gitlab
  • adobeacrobatreader
    #icon-adobeacrobatreader
  • gmail
    #icon-gmail
  • swift
    #icon-swift
  • ubuntu
    #icon-ubuntu
  • html5
    #icon-html
  • stackoverflow
    #icon-stackoverflow
  • sogou
    #icon-sogou
  • sparkpost
    #icon-sparkpost
  • rss
    #icon-rss
  • mozillafirefox
    #icon-mozillafirefox
  • amazon
    #icon-amazon
  • xbox
    #icon-xbox
  • empirekred
    #icon-empirekred
  • wechat
    #icon-wechat
  • javascript
    #icon-javascript
  • spreaker
    #icon-spreaker
  • linux
    #icon-linux
  • vim
    #icon-vim
  • nginx
    #icon-nginx
  • hulu
    #icon-hulu
  • line
    #icon-line
  • nodejs
    #icon-nodejs
  • bing
    #icon-bing
  • mongodb
    #icon-mongodb
  • tripadvisor
    #icon-tripadvisor
  • vuejs
    #icon-vuejs
  • googlehangouts
    #icon-googlehangouts
  • slack
    #icon-slack
  • kickstarter
    #icon-kickstarter
  • spotify
    #icon-spotify
  • wordpress
    #icon-wordpress
  • tencentqq
    #icon-tencentqq
  • skype
    #icon-skype
  • vimeo
    #icon-vimeo
  • react
    #icon-react
  • visualstudiocode
    #icon-visualstudiocode
  • microsoftoutlook
    #icon-microsoftoutlook
  • twitter
    #icon-twitter
  • docker
    #icon-docker
  • googleplay
    #icon-googleplay
  • webpack
    #icon-webpack
  • 500px
    #icon-px
  • telegram
    #icon-telegram
  • python
    #icon-python
  • jsfiddle
    #icon-jsfiddle
  • ifixit
    #icon-ifixit
  • buffer
    #icon-buffer
  • paypal
    #icon-paypal
  • windows
    #icon-windows
  • intel
    #icon-intel
  • readthedocs
    #icon-readthedocs
  • baidu
    #icon-baidu
  • php
    #icon-php
  • visa
    #icon-visa
  • google
    #icon-google
  • googledrive
    #icon-googledrive
  • onedrive
    #icon-onedrive
  • playstation
    #icon-playstation
  • jira
    #icon-jira
  • dropbox
    #icon-dropbox
  • xcode
    #icon-xcode
  • microsoftword
    #icon-microsoftword
  • github
    #icon-github
  • instapaper
    #icon-instapaper
  • django
    #icon-django
  • sublimetext
    #icon-sublimetext
  • microsoft
    #icon-microsoft
  • apple
    #icon-apple
  • yahoo
    #icon-yahoo
  • bootstrap
    #icon-bootstrap
  • mozilla
    #icon-mozilla
  • steam
    #icon-steam
  • wikipedia
    #icon-wikipedia
  • vsco
    #icon-vsco
  • applemusic
    #icon-applemusic

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>