一。用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. AutoIt上传非input控件方式的文件脚本

    AutoIt目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动 ...

  2. 洛谷 P2905 [USACO08OPEN]农场危机Crisis on the Farm

    题目描述 约翰和他的奶牛组建了一只乐队“后街奶牛”,现在他们正在牧场里排练.奶牛们分成一堆 一堆,共1000)堆.每一堆里,30只奶牛一只踩在另一只的背上,叠成一座牛塔.牧场 里还有M(1 < ...

  3. 为Oracle Clusterware修改公用及私有网络接口

    出于种种原因我们可能需要为已安装的Oracle集群软件修改其使用的公用或私有网络所使用的网络接口(How to Change Interconnect/Public Interface IP or S ...

  4. URAL 2027 URCAPL, Episode 1 （模拟）

    题意:给你一个HxW的矩阵,每个点是一个指令,根据指令进行一系列操作. 题解:模拟 #include<cstdio> #include<algorithm> using nam ...

  5. Processing分形之一——Wallpaper

    之前用C语言实现过一些分形,但是代码比较复杂.而对于天生对绘图友好的Processing,及其方便. 在大自然中分形普遍存在,我们用图形模拟,主要是找到一个贴近的函数. 代码 /** * Wallpa ...

  6. pycharm创建工程的两种形式：virtualenv环境和系统默认编译器

    转自:http://swiftlet.net/archives/3151 pycharm创建工程的时候可以选择编译器,如下图所示: 上图表示创建工程有两种方式:第一种是利用:virtualenv,第二 ...

  7. linux - mysql 安装教程

    环境介绍>>>>>>>>>>>>>>>>>> 操作系统:Centos 7 mysql数据库版 ...

  8. ovx openVirtex安装

    搞了好久的pox实验,中途一个星期没更新了吧, 今天继续... 新手第一次搞还是在虚拟机上最安全~ ovx参照上面的做吧,注意必须在联网的情况下,否则很多控件都连不上(第一次做的时候虚拟机没配ip 坑 ...

  9. 安装 Win7 的系统的时候如何分区

    解决方案 在安装Win7的系统的时候,可以使用下面方法进行分区: 1. 在出现同意许可条款,勾选“我接受许可条款(A)”后,点击下一步,然后继续下面操作: 2. 进入分区界面,点击“驱动器选项(高级) ...

  10. ssh整合思想 Spring与Hibernate和Struts2的action整合 调用action添加数据库 使用HibernateTemplate的save(entity)方法 update delete get 等方法crud操作

    UserAction类代码: package com.swift.action; import com.opensymphony.xwork2.ActionSupport; import com.sw ...