我们以阿里巴巴矢量图标库举例，地址：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. winform（四）——简单计算器制作

    效果图: 代码区: using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  2. SQLServer中修改字段为空

    ALTER 表名 table1 ALTER COLUMN [字段] 类型 NULL; 例如: ) COLLATE Chinese_PRC_CI_AS NULL;

  3. 足球游戏论坛数据分析－－简单粗暴的K均值聚类

    在<<足球游戏论坛数据分析--简单粗暴的贝叶斯>>中尝试了贴标签后,一直觉得结果无法接受, 慢慢回想, 其实选择的算法是错误的,原因有 论坛帖子分类并非就是PC/PS/XBOX ...

  4. 还来一篇说下json_value 以及 json_query 的应用 (3)

    上一篇说了一下openjson 的一些使用方法,这次再说一下在2016里面的查询取值,当然就是 json_query 和 json_value 这2兄弟了 首先 ) = '{"a" ...

  5. 有关stm32的问题，程序里面的u8、u16这些是什么意思啊

    u8 是 unsigned charu16 是 unsigned shortu32 是 unsigned int

  6. Neutron 理解 (4): Neutron OVS OpenFlow 流表 和 L2 Population [Netruon OVS OpenFlow tables + L2 Population]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  7. hdu-5977 Garden of Eden(树分治)

    题目链接: Garden of Eden Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/ ...

  8. LinkedIn的即时消息：在一台机器上支持几十万条长连接

    最近我们介绍了LinkedIn的即时通信,最后提到了分型指标和读回复.为了实现这些功能,我们需要有办法通过长连接来把数据从服务器端推送到手机或网页客户端,而不是许多当代应用所采取的标准的请求-响应模式 ...

  9. Python-04-基础

    一.装饰器(decorator) 装饰器本质上也是函数,目的是为其他函数添加附加功能(装饰其他函数) Python通过使用装饰器来达到代码的开放与封闭. 原则: 不能修改被装饰函数的源代码. 不能修改 ...

  10. Windows Serivce服务实现过程和打包安装

    环境:vs2013,win7 参考: Windows服务的快速搭建与调试(C#图解) .Net实现Windows服务安装完成后自动启动的两种方法 C# 生成windows 服务打包程序 1.新建项目W ...