CSS 字体图标
2018-12-16 本文已影响11人
roy_pub
图片有诸多优点，缺点也很明显，比如图片增加了总文件的大小，还增加了额外的http请求，降低网页性能。并且图片缩放会导致图片失真，在很多情况下我们是希望图标是可以缩放的，字体图标（iconfont）的优势就显现出来了。
字体图标优点：
- 可以做出和图片一样的事情，改变透明度、旋转等
- 本质是字体，可以改变颜色、产生阴影、透明效果等
- 体积更小，但携带的信息并没有消减
- 几乎支持所有浏览器
- 移动端设备必备良药
推荐网站：
https://icomoon.io
IcoMoon成立于2011年，推出第一个自定义图标字体生成器，允许用户选择他们所需要的图标，使他们成为一字型。
http://www.iconfont.cn/
这是阿里妈妈M2UX的一个 icon font 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。
http://fontello.com/
在线定制自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，项目开源。
字体如何引入HTML中：
<style>
@font-face {
font-family: "icomoon"; /*YourWebFontName*/
src: url('fonts/icomoon.eot?7kkyc2'); /* IE9 Compat Modes */
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/icomoon.ttf?7kkyc2') format('truetype'), /* Safari, Android, iOS */
url('fonts/icomoon.woff?7kkyc2') format('woff'), /* Modern Browsers */
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); /* Legacy iOS */
font-style: normal; /*倾斜字体正常*/
}
</style>
需要哪一张图片，就按照图中所示选中copy到HTML中即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@font-face {
font-family: "icomoon"; /*YourWebFontName*/
src: url('fonts/icomoon.eot?7kkyc2'); /* IE9 Compat Modes */
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/icomoon.ttf?7kkyc2') format('truetype'), /* Safari, Android, iOS */
url('fonts/icomoon.woff?7kkyc2') format('woff'), /* Modern Browsers */
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); /* Legacy iOS */
font-style: normal; /*倾斜字体正常*/
}
.location {
font-family: 'icomoon';
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<div class="location"></div>
</body>
</html>
自设计图标
如果图标库里没有，需要UI设计，保存为svg格式，交给前端人员，转化为页面能使用的字体，而且是需要生成的是兼容性适合各个浏览器的。
导入svg资源
追加图标
工作中，原有的字体图标不够用，原先的不能删除，如何追加。
把selection.json重新上传，然后再选择新添加的即可
