一。用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"></s>慕课网就是好1</a>
</li>
<li>

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

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

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

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

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

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

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

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

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

<a href=""><s class="imooc-icon"></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上面听一下，会受益匪浅。

如何用字体在网页中画icon的更多相关文章

  1. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  2. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  3. 用字体在网页中画icon小图标

    HTML结构: <i class="icons icon-ui"> 㐺 <i> <i class="icons icon-ui"& ...

  4. 在网页中制作icon图标

    用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...

  5. 用Raphael在网页中画圆环进度条

    原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆 放就不太好看了.随着cs ...

  6. 如何用iframe在网页中插入另一个网页的一部分内容，做成页中页

    <html><head></head><body><h1>这是一段引用的内容!!!</h1><div style=&quo ...

  7. 如何用JS判断网页中某个id的网页元素是否存在

    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <m ...

  8. 网页中导入特殊字体@font-face属性详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...

  9. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. Android Error:Could not run build action using Gradle installation

    错误内容: Error:Could not run build action using Gradle installation ‘D:\AndroidStudio\AS2.x\gradle\grad ...

  2. Docker 给运行中的容器添加映射端口

    方法1 1.获得容器IP 将container_name 换成实际环境中的容器名 docker inspect `container_name` | grep IPAddress 2. iptable ...

  3. pm2-web监控

    pm2-web 是一款 pm2 服务状态监控程序,基于 web . 安装 npm install -g pm2-web 运行(默认占用8080端口) pm2-web 自定义配置文件 通过 --conf ...

  4. Linux文件压缩命令

    一.zip命令(常用) 用zip命令压缩的文件在Windows系统下也是可以解压缩的,即此格式压缩文件两个系统通用. 文件压缩:zip  filename.zip   filename 目录压缩:zi ...

  5. Windows Azure 配置Active Directory 主机（4）

    步骤 6:设置在启动时加入域的虚拟机 若要创建其他在首次启动时加入域的虚拟机,请打开 Windows Azure PowerShell ISE,粘贴以下脚本,将占位符替换为您自己的值并运行该脚本. 若 ...

  6. (转载)Newtonsoft.Json使用总结

    Newtonsoft.Json使用总结 初识JSON.......................................................................... ...

  7. UVA 11552 Fewest Flops（区间dp）

    一个区间一个区间的考虑,当前区间的决策只和上一次的末尾有关,考虑转移的时候先统计当前区间出现过的字母以及种数ct 枚举上一个区间的末尾标号j,规定小于INF为合法状态,确定j之后看j有没有在当前的区间 ...

  8. CF Gym 100637F The Pool for Lucky Ones

    题意:给你一串非负整数,可以将一个非零数减1,加到相邻的数字上,要使其中所有最大数字的和最小. 题解:模拟可以过.也可以分析,可以要减少最大数字和,如果最大数字出现大于等于3次,可以把最大数字加一,或 ...

  9. javaweb基础(10)_HttpServletRequest原理介绍

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  10. UI Testing in Xcode 7

    参考文章: UI Testing in Xcode - WWDC 2015https://developer.apple.com/videos/play/wwdc2015-406/ Document ...