关于 iconfont 字体图标

简单介绍三种icon字体图标的方法。先选择想要使用的图标,加入购物车后添加到项目http://www.iconfont.cn/


Unicode方式

选择Unicode 生成并复制红框中的代码,然后在HTML中添加style,或者加入到CSS中,并将图标对应的Unicode码添加到相应的标签元素中,当然别忘了在CSS中添加字体font-family,字体名就是复制代码中的font-family。

Unicode方式操作图


Font Class方式

选择Font Class 然后选择编辑图标,在font class里面定义这个图标的名称,方便我们一会儿进行调用,然后复制代码。

编辑名称

编辑Font Class

修改成功 并复制新的代码

将这段代码直接在HTML中link引用,因为这是一个网络css文件,然后在标签元素中定义class的值为刚刚我们修改过的图标名称即可。

Font Class方式操作图


font-awesome

我们先在BootCDN上找到font-awesome的css文件

在bootCDN上找到font-awesome的css

将他复制下来

然后我们在http://fontawesome.dashgame.com/中找到我们想要使用的图标

选择图标

在HTML中link的href里面填写从bootCDN复制的font-awesome的css路径,并在元素标签中按class=”fa fa-图标名称”进行定义,即可得到图标

font-awesomes方式操作图



以上三种方式都是以字体库、CSS的方式实现的 ICON 图标的输出。
如果需要脱网进行本地显示,不仅需要 download 整个 fonts 文件夹,还需要 css 代码中的进行文件路径修改。


SVG

介绍

SVG是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。之前写过两篇关于CSS icon在页面显示的博客,后来了解到现在大多数前端团队和项目都在使用SVG Sprite这种方式进行制作ICON和让ICON实现页面显现。


SVG有什么优势和特点?

SVG方法与这两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。


使用方法和步骤

之前讲过了 Unicode 和 Font class 获取连接地址并进行字体设置的方法,我们回到阿里图标库,在筛选好了我们项目需要的图标并修改好他们的名称之后,这次选择 symbol,并复制他的代码。
选择Symbol

第一步

拷贝项目下面生成的 symbol 代码到 HTML 文件 head 的 <script></script> 中://at.alicdn.com/t/font_732020_vyfui00rk3.js
这里同样跟之前一样,要注意协议,最好直接在前面加上 https。


1
<script src="https://at.alicdn.com/t/font_732020_vyfui00rk3.js"></script>

第二步

加入通用css代码(引入一次就行):

1
2
3
4
5
6
7
8
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

第三步

挑选相应图标并获取类名,应用于页面:
例如我们要加入一个之前命名为icon-weixin1的微信图标,就在body中加入这段 <svg></svg>

1
2
3
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin1"></use>
</svg>


demo代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://at.alicdn.com/t/font_732020_vyfui00rk3.js"></script>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<title> svg-sprite-demo </title>

</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin1"></use>
</svg>

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin2"></use>
</svg>

<svg class="icon">
<use xlink:href="#icon-weibo1">333</use>
</svg>

</body>
</html>

预览效果:
http://jsbin.com/qovicalote/edit?html,output
放大也不会失真和有锯齿

本文结束  感谢您的阅读
0%