前端开发图标使用

在日常开发，前端coder绕不开一个话题，在页面上添加各种小图标，比如

或者是这样的：

一般来说，总体上有三种方案：

位图图标，png图片，经典的使用场景——精灵图；
字体图标，比较有名的：Font Awesome、icon-font
svg图标，配合前端框架使用，SVG Sprite技术了解一下……

位图图标

在IE时代，由于浏览器的兼容性问题，png图片是一个不得不采用的方案，实际中我们经常谈论的精灵图，就是这种图片。

字体图标

字体图标相比位图而言，具有以下优点：

图像更加清晰；
文件更小，一般来说，字体图标相比图片尺寸更小，节省网络资源；
灵活性更好，支持按字体的方式去动态调整图标大小，颜色等等；
兼容性更好，支持ie6+；

但是，它也有一些问题：

不支持多色图标，
在不同的设备上，字体的渲染会有一些差别，这是因为浏览器自身对字体的处理方式的不同造成的，此外，这种问题调整起来较为困难；

关于字体图标的使用，有两个方面需要考虑：
1.如何制作字体图标；
2.如何使用字体图标；

字体图标的制作

关于字体图标的制作，有两个方案：
一是，自己亲自动手制作，借助一些现成的工具，比如：Glyphs、IcoMoon

具体制作方法，可以参考这篇文章：如何把你的图标转换成web字体

二是，使用一些现成的第三方服务，比如前面说到的，Font Awesome、icon-font、IcoMoon；

下面我们具体介绍第二种，使用现成的第三方服务：

首先，从两个网站任选一个，下载选取的字体图标；

我们打开看一下里面的目录结构：

然后，针对上面的情况，我们要将字体文件合并成一个fonts文件夹，icomoon不需要合并，而icofont需要我们调整一下目录。复制style.css文件(iconfont.css)中的css样式，粘贴到实际项目的CSS文件中，我姑且将其重命名为iconfont.css，保持其为一个单独的CSS文件。

最后，将fonts.css引入到html中；

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

注意：在使用iconfont.css文件时，一定要根据实际的项目结构，调整字体的路径，类似这样的：

@font-face {font-family: 'icomoon';/* 调整路径 */src:  url('fonts/icomoon.eot?ln7h60');src:  url('fonts/icomoon.eot?ln7h60#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?ln7h60') format('truetype'),url('fonts/icomoon.woff?ln7h60') format('woff'),url('fonts/icomoon.svg?ln7h60#icomoon') format('svg');font-weight: normal;font-style: normal;
}

字体图标的使用

调用图标字体有三种方法：

通字符（Unicode）引用
字体类名（Font-class）
Symbol方式

Unicode引用

特点

（1）优点

兼容性最好，支持IE6+，及所有现代浏览器；
支持按字体的方式动态地调整图标大小，颜色等等；

（2）缺点：

显然unicode书写不直观，语意不明确，根据编码无法直接得知图标长啥样子；
因为本质上是字体，所以不支持多色，即便使用的是多色也会在项目中自动去色；

新版的iconfont支持多色图标，这些多色图标在unicode模式下不能使用，推荐使用symbol方式尽心引用；

使用步骤

一、编辑iconfont.css文件

主要有两个地方：

编辑 @font-face
定义iconfont的样式

/* 编辑字体文件路径*/
@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;
}/* 具体的样式是一些伪类 */
.icon-meifa:before {content: "\e603";
}.icon-zhijiayou:before {content: "\e604";
}.icon-xiangshui:before {content: "\e605";
}.icon-yanying:before {content: "\e606";
}

二、应用于页面

挑选相应图标并获取字体编码：

<!--引入iconfont.css文件-->
<link rel="stylesheet" href="./iconfont.css"><!--具体应用-->
<span class="iconfont">&#xe603;</span>

unicode编码的查看：iconfont.css文件中伪类元素进行对应即可；

补充：

其实，这编辑iconfont.css文件的时候，有一个地方需要注意一下，就是关于：定义iconfont样式，这部分代码的编写，有两种方式：
第一种：就是前面的方式定义 .iconfont类的样式，这种方式有一个问题，就是在页面引入样式的时候，总是需要重复写上类名iconfont，可能略显繁琐，那么如何做呢？
第二种：使用属性选择器进行样式匹配：
[class^="icon-"], [class*="icon-"] {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
这样，我们在页面引入时，直接写指定的 icon-xxx就可以了；这个其实看个人喜欢哪种喽！?

Font class 字体类名引用

特点

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

与 Unicode 使用方式相比，具有如下优点：

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

缺点：

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤

一、编辑iconfonts.css 文件：

这一步于unicode方式一样，主要区别在于页面引入的方式不同；

二、应用于页面

<!--引入iconfont.css文件-->
<link rel="stylesheet" href="./iconfont.css"><!--具体应用-->
<i class="iconfont icon-meifa"></i>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，一般默认是 “iconfont”。

symbol方式

特点

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章

这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

优点

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
因为是矢量图，所以缩放不会失真；
可以通过css实现动画效果；
减少http请求，

因为使用svg-icon后，我再也不用发送woff|eot|ttf| 这些字体库的请求了，所有的svg都可以内联在html内。

缺点：

兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤

一、编辑iconfont.css文件

这一步与前面的两种方法是一样的，区别还是在于引入方式的不同；

二、页面应用

引入的时候，我们需要做三件事情：

（1）引入项目下面生成的 symbol 代码：
（2）加入通用 CSS 代码（引入一次就行）：
（3）挑选相应图标并获取类名，应用于页面：

<!--（1）引入项目下面生成的 symbol 代码-->
<script src="./iconfont.js"></script><!--加入通用 CSS 代码（引入一次就行）-->
<style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}</style><!-- (3)挑选相应图标并获取类名，应用于页面 -->
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

这里是一个最终代码的对比图：

我们再来看一下浏览器编译之后的页面：

好了，到此为止，我们已经介绍了前端开发中icon的引入。其实，在当下的开发中，前端三大框架的使用，我们也会通过一些方式进行引入，随后的文章，我将介绍一下如何在vue项目中引入svg图标。

最后

欢迎，交流，一起进步，我是一名前端coder?。

前端开发中icon图标使用的那些门道儿相关推荐

前端开发中常用图片格式
前端开发中常用图片格式在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
浅谈iPhone和iPad开发中的图标设置
浅谈iPhone和iPad开发中的图标设置图标大小问题我们的辛辛苦苦做出来的应用程序在iPhone上的表示仅仅是一个图标,对这个图标不可以不谨慎对待,不能因为大小不对头这些小问题而失真啊什么的. ...
【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
前端开发中的调试技巧
前端开发中的调试技巧骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候.那个时候,网页主要运行在以IE6为主的浏览 ...
前端开发中JS调试技巧，你知道几种？用过几种？
调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如 ...
表单html遇到的问题及处理,Web前端开发中常见问题及解决方案
Web前端开发中常见问题及解决方案时间:2017-04-24 来源:web前端开发小赢家作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...
一探前端开发中的JS调试技巧
转自:http://seejs.me/2016/03/27/%E3%80%90%E5%8E%9F%E5%88%9B%E3%80%91%E4%B8%80%E6%8E%A2%E5%89%8D%E7%AB% ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...

前端开发中icon图标使用的那些门道儿

前端开发图标使用

位图图标

字体图标

字体图标的制作

字体图标的使用

Unicode引用

特点

使用步骤

Font class 字体类名引用

特点

使用步骤

symbol方式

特点

使用步骤

最后

前端开发中icon图标使用的那些门道儿相关推荐

最新文章

热门文章