如何用字体在网页中画icon

一。用css雪碧图

1.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
2.优点
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
3.缺点
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

二。用font-html

三。用font-css

一。css雪碧图是通过背景图片的定位方式在确定图标的位置，最终实现效果的

二。

   用字体画icon需要借助一个网站：https://icomoon.io/app/#/select

 

//font+html实现，此方法可以兼容IE低版本。


.sprite{
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li{
cursor: pointer;
height: 42px;
width: 206px;
background-color: #b51600;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
color: #fff;
line-height: 42px;
font-size: 14px;
}
.sprite li s{
margin:0 10px;
}
.sprite li:hover{
background-color: #fff;
border-color: #fff
}
.sprite li:hover a{
color: #b51600;
}

@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.imooc-icon{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size:20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/fontHTML.css"/>
<title>字体图标icon</title>
</head>
<body>
<ul class="sprite">
<li>

<a href=""><s class="imooc-icon">&#xe903;</s>慕课网就是好1</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好2</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好3</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好4</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好5</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好6</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好7</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好8</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好9</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好10</a>
</li>
<li>

<a href=""><s class="imooc-icon">&#xe904;</s>慕课网就是好11</a>
</li>
</ul>

</body>
</html>

 

 

 

//font+css画图标， 此方法不支持IE8以下版本


.sprite{
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li{
cursor: pointer;
height: 42px;
width: 206px;
background-color: #b51600;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
color: #fff;
line-height: 42px;
font-size: 14px;
}
.sprite li s{
margin:0 10px;
}
.sprite li:hover{
background-color: #fff;
border-color: #fff
}
.sprite li:hover a{
color: #b51600;
}

@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.imooc-icon{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size:20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-list:before{
content: "\e903"
}

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/fontCSS.css"/>
<title>font-css</title>
</head>
<!--IE8以下不兼容-->
<body>
<ul class="sprite">
<li>

<a href=""><s class="imooc-icon icon-list"></s>慕课网就是好1</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好2</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好3</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好4</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好5</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好6</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好7</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好8</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好9</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好10</a>
</li>
<li>

<a href=""><s class="imooc-icon icon-list""></s>慕课网就是好11</a>
</li>
</ul>

</body>
</html>

实在不知道如何解释，提醒各位可以上慕课网：http://www.imooc.com/video/5431上面听一下，会受益匪浅。

 

posted @ 2017-01-11 11:57  不再犯错  阅读(401)  评论(0)  编辑  收藏  举报