# IconFont Demo

# 

- 
  weibo
  &#xe6c4;
- 
  codepen
  &#xea79;
- 
  spotify
  &#xebf4;
- 
  reddit
  &#xe761;
- 
  icon-left
  &#xe642;
- 
  icon-right
  &#xe666;
- 
  deviantart
  &#xe6c6;
- 
  dribbble
  &#xe6d8;
- 
  zhihu
  &#xe6ba;
- 
  wordpress
  &#xe848;
- 
  twitter
  &#xeb2a;
- 
  whatsapp
  &#xeb92;
- 
  facebook
  &#xe638;
- 
  gitlab
  &#xe719;
- 
  medium
  &#xe783;
- 
  steam
  &#xe811;
- 
  jsfiddle
  &#xe752;
- 
  soundcloud
  &#xe81d;
- 
  y-combinator
  &#xeb32;
- 
  linkedin
  &#xe696;
- 
  pinterest
  &#xe697;
- 
  500px
  &#xe607;
- 
  bitbucket
  &#xe645;
- 
  instagram
  &#xe6b6;
- 
  slideshare
  &#xe6fd;
- 
  twitch
  &#xe72a;
- 
  vine
  &#xe735;
- 
  xing
  &#xe741;
- 
  snapchat
  &#xe8b2;
- 
  douban
  &#xe688;
- 
  github
  &#xe691;
- 
  t
  &#xe601;
- 
  mail 2
  &#xe622;
- 
  behance
  &#xe621;
- 
  POP_last.fm
  &#xe681;
- 
  odnoklassniki
  &#xe624;
- 
  strava
  &#xe627;
- 
  goodreads
  &#xe62a;
- 
  kickstarter
  &#xe644;
- 
  bandcamp
  &#xe64b;
- 
  flickr
  &#xe660;
- 
  keybase
  &#xe665;
- 
  paypal
  &#xe667;
- 
  mastodon
  &#xe94a;
- 
  folder
  &#xe7d1;
- 
  skype
  &#xe87d;
- 
  icon-tag
  &#xe632;
- 
  sun
  &#xe684;
- 
  timer
  &#xe664;
- 
  researchgate
  &#xe693;
- 
  angellist
  &#xf163;
- 
  mix
  &#xf1f5;
- 
  patreon
  &#xf209;
- 
  quora
  &#xf218;
- 
  stack-overflow
  &#xf239;
- 
  telegram-plane
  &#xf246;
- 
  tumblr
  &#xf24a;
- 
  vk
  &#xf25e;
- 
  youtube
  &#xe765;
- 
  Google scholar
  &#xe736;
- 
  foursquare
  &#xe8ed;

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

- weibo
  .icon-weibo
- codepen
  .icon-codepen
- spotify
  .icon-spotify
- reddit
  .icon-reddit
- icon-left
  .icon-dajiantou
- icon-right
  .icon-xiaojiantou
- deviantart
  .icon-deviantart
- dribbble
  .icon-dribbble
- zhihu
  .icon-zhihu
- wordpress
  .icon-wordpress
- twitter
  .icon-twitter
- whatsapp
  .icon-whatsapp
- facebook
  .icon-facebook
- gitlab
  .icon-gitlab
- medium
  .icon-medium
- steam
  .icon-steam
- jsfiddle
  .icon-jsfiddle
- soundcloud
  .icon-soundcloud
- y-combinator
  .icon-ycombinator
- linkedin
  .icon-linkedin
- pinterest
  .icon-pinterest
- 500px
  .icon-500px
- bitbucket
  .icon-bitbucket
- instagram
  .icon-instagram
- slideshare
  .icon-slideshare
- twitch
  .icon-twitch
- vine
  .icon-vine
- xing
  .icon-xing
- snapchat
  .icon-snapchat
- douban
  .icon-douban
- github
  .icon-github
- t
  .icon-t
- mail 2
  .icon-mail
- behance
  .icon-behance
- POP_last.fm
  .icon-POP_lastfm
- odnoklassniki
  .icon-odnoklassniki
- strava
  .icon-strava
- goodreads
  .icon-goodreads
- kickstarter
  .icon-kickstarter
- bandcamp
  .icon-bandcamp
- flickr
  .icon-flickr
- keybase
  .icon-keybase
- paypal
  .icon-paypal
- mastodon
  .icon-mastodon
- folder
  .icon-folder
- skype
  .icon-skype
- icon-tag
  .icon-icon-tag
- sun
  .icon-sun
- timer
  .icon-timer
- researchgate
  .icon-researchgate
- angellist
  .icon-angellist
- mix
  .icon-mix
- patreon
  .icon-patreon
- quora
  .icon-quora
- stack-overflow
  .icon-stack-overflow
- telegram-plane
  .icon-telegram-plane
- tumblr
  .icon-tumblr
- vk
  .icon-vk
- youtube
  .icon-youtube
- Google scholar
  .icon-Googlescholar
- foursquare
  .icon-foursquare

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

- weibo
  #icon-weibo
- codepen
  #icon-codepen
- spotify
  #icon-spotify
- reddit
  #icon-reddit
- icon-left
  #icon-dajiantou
- icon-right
  #icon-xiaojiantou
- deviantart
  #icon-deviantart
- dribbble
  #icon-dribbble
- zhihu
  #icon-zhihu
- wordpress
  #icon-wordpress
- twitter
  #icon-twitter
- whatsapp
  #icon-whatsapp
- facebook
  #icon-facebook
- gitlab
  #icon-gitlab
- medium
  #icon-medium
- steam
  #icon-steam
- jsfiddle
  #icon-jsfiddle
- soundcloud
  #icon-soundcloud
- y-combinator
  #icon-ycombinator
- linkedin
  #icon-linkedin
- pinterest
  #icon-pinterest
- 500px
  #icon-500px
- bitbucket
  #icon-bitbucket
- instagram
  #icon-instagram
- slideshare
  #icon-slideshare
- twitch
  #icon-twitch
- vine
  #icon-vine
- xing
  #icon-xing
- snapchat
  #icon-snapchat
- douban
  #icon-douban
- github
  #icon-github
- t
  #icon-t
- mail 2
  #icon-mail
- behance
  #icon-behance
- POP_last.fm
  #icon-POP_lastfm
- odnoklassniki
  #icon-odnoklassniki
- strava
  #icon-strava
- goodreads
  #icon-goodreads
- kickstarter
  #icon-kickstarter
- bandcamp
  #icon-bandcamp
- flickr
  #icon-flickr
- keybase
  #icon-keybase
- paypal
  #icon-paypal
- mastodon
  #icon-mastodon
- folder
  #icon-folder
- skype
  #icon-skype
- icon-tag
  #icon-icon-tag
- sun
  #icon-sun
- timer
  #icon-timer
- researchgate
  #icon-researchgate
- angellist
  #icon-angellist
- mix
  #icon-mix
- patreon
  #icon-patreon
- quora
  #icon-quora
- stack-overflow
  #icon-stack-overflow
- telegram-plane
  #icon-telegram-plane
- tumblr
  #icon-tumblr
- vk
  #icon-vk
- youtube
  #icon-youtube
- Google scholar
  #icon-Googlescholar
- foursquare
  #icon-foursquare

## 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>