一。用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. 【机器学习实战】第2章 K-近邻算法(k-NearestNeighbor，KNN)

    第2章 k-近邻算法 KNN 概述 k-近邻(kNN, k-NearestNeighbor)算法主要是用来进行分类的. KNN 场景 电影可以按照题材分类,那么如何区分 动作片 和 爱情片 呢? 动作 ...

  2. ios 利用runtime任性跳转

    在开发项目中,会有这样变态的需求: 推送:根据服务端推送过来的数据规则,跳转到对应的控制器 feeds列表:不同类似的cell,可能跳转不同的控制器(嘘!产品经理是这样要求:我也不确定会跳转哪个界面哦 ...

  3. pt-table-checksum和pt-table-sync

    环境:系统bsd,标准安装,ports安装的mysql. 主172.16.21.126 从172.16.21.128vi /etc/rc.conf 添加 mysql_enable="YES& ...

  4. Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...

  5. UWP开发：存储容器设置&复合设置数据

    有时候为了将应用设置进行分类,需要创建新的容器进行存储应用设置的信息. 1,容器的创建:在一个根容器里嵌套一个新容器 1)首先获取根容器. 2)调用ApplicationDataContainer.C ...

  6. 2018.4.27 Java的Swing常用事件

    Swing常用事件 1.Java Swing中处理事件的一般步骤是: (1)新建一个组件(JButton) (2)将该组件添加到面板中(JPanel) (3)注册监听器以监听事件源产生的事件(如Act ...

  7. MyBatis01 Idea中搭建MyBatis开发环境

    项目结构 POM模板 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  8. 两个对象值转换的方法（BeanUtils.copyProperties与JSONObject.parseObject对比）

    将源对象赋值到目标对象方法: 方法一:BeanUtils.copyProperties(源对象, 目标对象); //org.springframework.beans.BeanUtils 方法二:目标 ...

  9. axios的post请求方法---以Vue示例

    Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使 ...

  10. 关于SpringMVC注解

    1.@RequestMapping RequestMapping是一个用来处理请求地址映射的注解(将请求映射到对应的控制器方法中),可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址 ...