来一个阿里妈妈字体图标的简单说明书吧-CSDN博客

随着前端技术的飞速发展,涌现了很多新的技术.而且我们在用户体验的路上也是一直在孜孜不倦的探索着.为了提高页面的加载速度,渲染速度.提高用户的体验做出了很多努力.

可是最近发现很多前端开发者还是不会是用阿里妈妈这个巨大的iconFont资源库,真的浪费哇.所以就有了这么一篇文章.

前方高能!!!非战斗人员请速速离开,下面开始事无巨细的介绍如何使用阿里妈妈的iconFont来优化前端图片的使用体验,从而降低开发成本,减少HTTP请求,从而提高用户体验.废话不多少,开搞

1.首先打开阿里妈妈的网站点我去阿里妈妈,登录什么的就不用说了吧
2.建议新建一个项目,名字看个人喜好
- 这里我新建了一个项目,接下来就可以去尽情的挑选自己喜欢的图标了.
3.Shopping
- 点击图标库然后尽情的将自己喜欢的图标加入购物车.然后添加到我们的demo项目中来.如下图所示:

4.点击查看在线链接,就会生成一个CSS,然后我们打开这个CSS

5.打开之后的CSS代码如下图所示:

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.eot?t=1501814101195'); /* IE9*/
  src: url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.eot?t=1501814101195#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.woff?t=1501814101195') format('woff'), /* chrome, firefox */
  url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.ttf?t=1501814101195') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.svg?t=1501814101195#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-add:before { content: "\e6df"; }
.icon-addition_fill:before { content: "\e6e0"; }
.icon-addition:before { content: "\e6e1"; }
.icon-addpeople_fill:before { content: "\e6e2"; }
.icon-browse_fill:before { content: "\e6e4"; }
.icon-browse:before { content: "\e6e5"; }
.icon-brush:before { content: "\e6e6"; }
.icon-camera:before { content: "\e6e7"; }
.icon-close:before { content: "\e6e9"; }
复制代码

这里的代码就是就是我们上面加入项目的图标.

至此,图标和代码已经有了,那么该如何使用在项目中呢?骚年,别着急,慢慢来,看下面的代码

###前方高能!前方高能!前方高能!

1.我们随便创建一个项目,创建一个CSS文件,将上面的代码复制进去.然后在HTML文件里面进行引用.很简单.看下面的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>iconFontDemoProj</title>
		<link rel="stylesheet" type="text/css" href="css/icon-font.css"/>
		<style type="text/css">
			ul,li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<ul>
				<!--这里的i就是我们的字体图标,第二个class就是对应的icon-->
				<li><i class="iconfont icon-close"></i>item1</li>
				<li><i class="iconfont icon-addition"></i>item2</li>
				<li><i class="iconfont icon-addition_fill"></i>item3</li>
			</ul>
		</div>
	</body>
</html>

复制代码

2.效果如下所示:

是不是很简单方便?(此处貌似听到了小猪在说:amazing!).

而且图片也不用去HTTP请求了:

页面的打开速度得到了显著的提升,amazing....Orz...

最后,是用ioncFont最大的一个好处是方便自定义,你可以像设置字体一样设置他的颜色,大小.加粗或者是倾斜等等,方便快捷无痛,amazing

看下面的代码所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>iconFontDemoProj</title>
		<link rel="stylesheet" type="text/css" href="css/icon-font.css"/>
		<style type="text/css">
			ul,li{
				list-style: none;
			}
			/*在这里可以很方便的定义字体的一些属性*/
			.iconfont{
				font-size: 20px;
				font-weight: bold;
				margin: 0 10px 0 0;
				font-style: inherit;
			}
			.icon-close{
				color: red;
			}
			.icon-addition{
				color: yellowgreen;
			}
			.icon-addition_fill{
				color:cyan
			}
		</style>
	</head>
	<body>
		<div class="header">
			<ul>
				<!--这里的i就是我们的字体图标,第二个class就是对应的icon-->
				<li><i class="iconfont icon-close"></i>item1</li>
				<li><i class="iconfont icon-addition"></i>item2</li>
				<li><i class="iconfont icon-addition_fill"></i>item3</li>
			</ul>
		</div>
	</body>
</html>
复制代码