我们以阿里巴巴矢量图标库举例，地址：http://www.iconfont.cn/

在这里，你可以上传你的矢量图标，也可以直接使用现成的小图标。

为什么要用这些个图标字体，本文就不介绍了，请自行百度。

下面，我将介绍如何使用iconfont图标字体。

假设，有一个项目，在登录的时候需要两个小图标，一个是代表帐号，另一个代表密码的图标，大概就是这样：

图片的红框处，我们需要俩个小图标。以前的做法肯定是做图片啦，现在就可以用iconfont字体图标代替了。操作如下：

第一步：你得有一个阿里巴巴矢量图标库帐号。

咳，咳（这一步略。。。。。。）

第二步：搜索你想要的图标，操作如下：

回车，搜索。

出来了很多的小图标，选择一个你喜欢的。

我们这里选择这个，点击前面的小车车，把图标放进我们的暂存架中。

已经有一个图标了，我们还要选择一个密码图标，操作类似。操作完成如下：

第三步：储存为项目。

选择“储存为新项目”，如果是给项目追加图标就选择“储存为历史项目”，我们这里选择储存为新项目

输入项目名称，储存

自动跳转到后台；如下所示：

第四步：生成代码

点击“获取在线链接”生成在线链接

图标生成成功，如下所示：

第五步：在项目中使用iconfont字体图标

第一种使用方法：

代码如下： 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>test</title> 

<style type="text/css"> 

@font-face { 

font-family: 'iconfont'; 

src: url('//at.alicdn.com/t/font_1476968077_2697372.eot'); /* IE9*/ 

src: url('//at.alicdn.com/t/font_1476968077_2697372.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 

url('//at.alicdn.com/t/font_1476968077_2697372.woff') format('woff'), /* chrome、firefox */ 

url('//at.alicdn.com/t/font_1476968077_2697372.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 

url('//at.alicdn.com/t/font_1476968077_2697372.svg#iconfont') format('svg'); /* iOS 4.1- */ 

} 

.iconfont{ 

font-family: iconfont; 

font-size: 16px; 

font-style: normal; 

display: inline-block; 

-webkit-text-stroke-width: 0.2px; /* 严重的锯齿,对字体图标的边缘进行模糊 */ 

} 

</style> 

</head> 

<body> 

<span class="iconfont">&#xe600</span> 

<span class="iconfont">&#xe601</span> 

</body> 

</html>

第二种使用方法：

代码如下：

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style type="text/css"> 

@font-face { 

font-family: 'iconfont'; 

src: url('//at.alicdn.com/t/font_1476968077_2697372.eot'); /* IE9*/ 

src: url('//at.alicdn.com/t/font_1476968077_2697372.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 

url('//at.alicdn.com/t/font_1476968077_2697372.woff') format('woff'), /* chrome、firefox */ 

url('//at.alicdn.com/t/font_1476968077_2697372.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 

url('//at.alicdn.com/t/font_1476968077_2697372.svg#iconfont') format('svg'); /* iOS 4.1- */ 

} 

.iconfont{ 

font-family: iconfont; 

font-size: 16px; 

font-style: normal; 

display: inline-block; 

-webkit-text-stroke-width: 0.2px; /* 严重的锯齿,对字体图标的边缘进行模糊 */ 

} 

.icon-user:after{content: "\e600";} 

.icon-pwd:after{content: "\e601";} 

</style> 

</head> 

<body> 

<span class="iconfont icon-user"></span> 

<span class="iconfont icon-pwd"></span> 

</body> 

</html>

推荐使用第二种。

浏览效果如下：

在使用中可能会遇到的问题？

错误提示如下：

找不到文件路径，因为我们使用的是相对路径，它去我们本地找这个文件，肯定是找不到的，解决方法有以下两种方法。

第一种：下载图标到本地。

在配置为本地的路径，就可以了

第二种：把相对路径改成绝对路径

给加上http就可以访问了。

本教程到这里就结束了。赶快去试试吧(*^__^*)

如何使用iconfont字体代替小图片？的更多相关文章

  1. 如何利用iconfont图标代替小图片

    1.首先 你要有一个阿里巴巴矢量图这个网站的账号:http://www.iconfont.cn/ 在这里注册哦~ 2.蓝后 可以在首页搜索你想要的图标,比如 我想放一个管理员的图标在页面上: 就要点击 ...

  2. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  3. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  4. Atitit.java图片图像处理attilax总结  BufferedImage extends java.awt.Image获取图像像素点image.getRGB(i, lineIndex); 图片剪辑/AtiPlatf_cms/src/com/attilax/img/imgx.javacutImage图片处理titit 判断判断一张图片是否包含另一张小图片 atitit 图片去噪算法的原理与

    Atitit.java图片图像处理attilax总结 BufferedImage extends java.awt.Image 获取图像像素点 image.getRGB(i, lineIndex); ...

  5. 分享:录制gif小图片工具

    今天博主分享一个录制gif小图片的工具[LICEcap]: 有的时候,图片解释起来不够直观,如果是一段小动画,别人一看就懂了. 工具我放在百度网盘上面,当然也可以自己在网上下载. 下载地址:http: ...

  6. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  7. Win7下Eclipse中文字体太小

    http://www.cnblogs.com/newdon318/archive/2012/03/23/2413340.html 最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认 ...

  8. Atitit 判断判断一张图片是否包含另一张小图片

    Atitit 判断判断一张图片是否包含另一张小图片 1. keyword1 2.  模板匹配是在图像中寻找目标的方法之一(切割+图像相似度计算)1 3. 匹配效果2 4. 图片相似度的算法(感知哈希算 ...

  9. Cool！12幅由小图片组成的创意图像重组作品

    这里分享15幅创意插图作品,这些创意插图作品都是有成千上万的小图片组成的,很多创意广告会采用这个形式的设计.下面这组创意作品的作者是 Charis Tsevis,来自希腊的视觉设计师,擅长图像重组的创 ...

随机推荐

  1. 0027 Java学习笔记-面向对象-(非静态、静态、局部、匿名)内部类

    内部类 内部类就是把一个类写在另一个类的内部 用途: 如果一个类只希望它被某一个类访问,那么可以把它定义在另一个类的内部,并用private修饰 内部类可以访问它所在外部类的private成员:但所在 ...

  2. SQL Server 2008 R2——统计各部门某年入职人数

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  3. [Java入门笔记] 面向对象编程基础（一）：类和对象

    什么是面向对象编程? 我们先来看看几个概念: 面向过程程序设计 面向过程,是根据事情发展的步骤,按进行的顺序过程划分,面向过程其实是最为实际的一种思考方式,可以说面向过程是一种基础的方法,它考虑的是实 ...

  4. InfluxDB学习之InfluxDB数据保留策略（Retention Policies）

    InfluxDB每秒可以处理成千上万条数据,要将这些数据全部保存下来会占用大量的存储空间,有时我们可能并不需要将所有历史数据进行存储,因此,InfluxDB推出了数据保留策略(Retention Po ...

  5. 002.php安装(lnmp)

    搭建lnmp环境时,需要先安装mysql,再安装php,而nginx安装顺序无所谓,nginx与php之间的联系需要手动配置 一.php下载和配置“安装环境“ [root@huh ~]# cd /us ...

  6. 报表开发导出各种格式文件的API

    文件输出的多样性,准确性和稳定性对于我们常用的报表软件来说很重要.报表的输入是指从报表的模板文件(XML格式的)创建WorkBook对象,输出则指将报表保存为各种格式文件,比如Pdf.Excel.Wo ...

  7. 传输层协议TCP和UDP

    本文力图简洁,让读者对TCP和UDP有个初步的认知.闲话少说,现在开始吧.TCP和UDP都是传输层的协议.TCP通过三次握手建立可靠连接,对未送达的消息重新进行发送.UDP不建立连接而直接发送,对未送 ...

  8. 嵌入式Linux驱动学习之路(二十三)NAND FLASH驱动程序

    NAND FLASH是一个存储芯片. 在芯片上的DATA0-DATA7上既能传输数据也能传输地址. 当ALE为高电平时传输的是地址. 当CLE为高电平时传输的是命令. 当ALE和CLE都为低电平时传输 ...

  9. http协议进阶（一）http概述

    参考书籍——<HTTP权威指南> 1.web客户端和服务器 http客户端发出请求,其中包含请求内容,发给服务器,服务器再返回内容中回送请求的数据,http客户端和服务器构成了万维网的基本 ...

  10. jquery easyui 1.4.1 验证时tooltip 的位置调整

    现象是在表单中如果显示两列控件,右边的控件是combo,combobox 等右边有按钮的,宽度为100%时,验证不通过的tooltip 显示位置不准确如下图所示 打开 jquery.easyui-1. ...