图标替代方案:Unicode、CSS 和 Font

图标替代方案:Unicode、CSS 和 Font

网上有很多高质量的图标,基于icon的关键词能在Google上搜索到不少内容,不考虑版权外还要修改大小、颜色等等,现在介绍一些替代方案:Unicode、CSS 和 Font,它具有更高的灵活性。

方案一:Unicode(维基百科

维基百科中:

Unicode(中文:万国码、国际码、统一码、单一码)是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码,使得电脑可以用更为简单的方式来呈现和处理文字。

Unicode以16进制表示,例如一些图标可以表示为(一些平台会自动转换成emoji,如iOS):

2600
2601
2602
2603
2604
2605
2606
2607
2608
2609
260a
260b
260c
260d
260e
260f
2610
2611
2612
2613
2614
2615
2616
2617
2618
2619
261a
261b
261c
261d
261e
261f

相比Unicode,好处在于更小的体积,以及能够快速更改颜色等。
更多请至:http://jrgraphix.net/r/Unicode/2600-26FF

方案二:CSS

cssicon

上图中内容均为css实现,可能你觉得这些很简单,甚至有些粗糙,但他在当今HTML5+CSS3的配合下能完成不少有意思的互动,由于设备迭代速度很快,近年来也再也没有IE6的迷之Bug的困扰了。

更多请至:http://cssicon.space/#/

方案三:Font字体

用图标字体来代替图标是当下最流行且优雅的解决方案,它能如普通字体一样指定各种属性,主要有两种字体:AwesomeMaterial icons,这两者均为Web字体,需要在CSS中使用@font-face加载,二者的用法上都差不多,一下以Google的font Material icons 来示例。

googlefont

Web字体的加载

Google这个 Material icons 字体有个对应的API,很方便

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

但是由于你懂的原因不太好用,字体也可下载到本地加载:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

可以为字体指定初始样式(非必要):

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

如果有了上面的字体样式初始化,就可以直接使用material-icons类来调用图标:

<i class="material-icons">face</i>

也可以直接指定内容 font-family: 'Material Icons'来调用,例如:

#main .reply a:before {
    font-family: 'Material Icons';
    content: "reply";
    padding-right: .3em;
    display: inline-block;
    vertical-align: text-bottom;
    font-size: 1.25em;
}

更多请至:Awesome Material icons