用字体绘制icon图标

font-banner

图标在开发项目中运用非常广泛。适当的图标可以达到一图胜千言的效果。如今主流技术主要有这三种:1. CSS Sprite  2. font+html  3.font+css。首先,让我们先看下这三种技术的简介和使用方法。

  一  CSS Sprite

CSS Sprite 在国内被称为“CSS 雪碧”,也叫“CSS 精灵”,它是把一些零星的背景图片整合到一张图片文件中,再利用CSS 的背景图片定位到要显示的位置,因此也是一种“图片拼接”技术。

  • 1.特点
    • 1)相对于单个小图标,它可以减少文件体积和服务器请求次数。
    • 2)一般来说,保存为PNG-24的文件格式。
    • 3)可以设计出丰富多彩的图标。
  • 2.难点
    • 1)需要预先确定每一个图标的大小。
    • 2)要特别注意小图标之间的距离。。
    • 3)足够的细心和耐心。。
  • 2.案例分析
  • 第一步:分析计算好对应图标的位置
    case1
  • 第二步:用js实现定位
    case1-second

二   用字体在网页中画ICON图标

问:为什么会那么流行用字体在网页中画ICON图标呢?

  • 答:
  • 1.灵活性:能轻松改变图标颜色或者其他的样式。
  • 2.可扩展:改变图标大小就跟改变字体大小一样简单。
  • 3.矢量性:图标是矢量的,与像素无关。缩放图标不会影响清晰度。
  • 4.兼容性:字体图标可以支持现在所有的浏览器(还支持麻烦的ie6)。
  • 5.本地使用:通过添加定制字体到你的本地系统,你可以在不同的设计和编辑运用程序中使用它们。
工欲善其事必先利其器,刚开始接触代码,编程,必须先学会选择好编程工具。这里推荐大家使用icomoon-图标制作神器。网站:https://icomoon.io/

推荐理由:

  • 1.它是免费的图标,而且运用程序免费,里面包含了4000以上的字体图标。
  • 2.构建只需要包含你需要的图标,无需全部下载下来。
  • 3.导入自己制作的图标(注意图标必须是SVG格式),不会被上传到服务器。
  • 4.方便管理图标,除了生成字体,还可以生成SVG文件。

具体如何使用:可以点击链接http://jingyan.baidu.com/article/f79b7cb346cf499145023e78.html进行学习,操作简单。

构建完需要的字体库,下载后文件会包含4中字体,说明如下图所示:

four-type-fonts

四种字体对浏览器支持情况,如图所示:

fonts-support

结论:由于4中字体对支持情况不同,为了让所有浏览器都能够兼容,所以必须要引入这4种字体文件。

用字体画icon图标,必须学会css2提出@font-face。它的语法是:@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>]; } 。引入上述四种字体,就可以完美兼容浏览器。

用字体画图标分为两种:1. font+html  2.font+css。

1.font+html

通过一个例子来看font+html是如何制作图标。

1.建立index.html.

create-eg

每个li中<i><i>标签都需要加class=”imooc-icon”.imooc-icon是图标class名称,这个名字是根据你在icomoon官网上下载图标的class命名。<li><a href=””><i  class=”imooc-icon”></i></a></li>中例如e60b是每个图标对应的十六进制.在HTML结构中输入16进制、需在其前面加上&#x(不然会直接输出).

2.css文件

create-eg2

注意:1)在@font-face中url后不加一个?ie下字体不会出现。

2)ie9以下浏览器需在.eot后面增加?#iefix(起作用的是?)。

3)添加src:url(../fonts/icomoon.eot);/* IE9的兼容模式 */(否则browser模式和doc模式不匹配时将不显示)。

3.用浏览器查看,就可以看到用字体编译的图标出现了

create-eg3

我们可以通过改变font-size改变字体大小,color改变字体颜色等。只需要改变字体有的css属性就可以改变图标的样子。是不是很方便呀,哈哈!

2.  font+css

运用到的知识点主要是content属性与before和after伪类配合插入生成的内容。Font+css制作图标,主要是通过css来管理每一个图标。

那么多图标,该如何管理呢?选择好需要的图标,点击参数设置,会出现如下图界面:

fonthtml1

可以自定义字体名称,设置class前缀,后缀等。着重看下css选择器3种不同形式。

  • 1)Use i(for selecting <i>)
  • usei
  • 2)Use Attribute Selectors
  • use-selcector
  • 3)Use a class
  • use-class

通过一个例子来看font+css是如何制作图标。

1.建立html文件,通过添加类选择器来实现图标添加。

fontCss

2.css文件。

fontCss2

每个图标类选择器通过before伪类设置content属性值为对应图标的十六进制就可以显示图标。

3.用浏览器查看,就可以看到用字体编译的图标出现了。

fontCss3
总结:1. CSS Sprite  2. font+html  3.font+css这三种技术对比,如下图所示:
无论哪种技术,要通过分析项目需求,选择适合项目的才是最好的。

6