我们以阿里巴巴矢量图标库举例，地址：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. SQL Server 2008 R2——使用计算列为表创建自定义的自增列

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

  2. Forbidden You don't have permission to access / on this server PHP

    在新安装的谷歌游览器里,打不了PHP网站了,错误显示: Forbidden You don't have permission to access / on this server. 原因还是配置权限 ...

  3. windows 2012 r2下安装sharepoint 2013错误解决

    日前,我在安装sharepoint 2013时,需要预部署一些软件,我们知道运行产品准备工具“prerequisiteinstaller”后就可以自动下载安装配置这些软件,但是使用系统为windows ...

  4. Fiery Youth

    青春和时间是一对好兄弟,让人留恋的时光总是那么快偷偷溜走了.学习java不能确定改变生活和现状,至少是迈出了进步的决定,而不是停滞不前.既然这样,那就动起来吧!看了刘树勇老师的演讲,就得出一个结论:千 ...

  5. BZOJ1588: [HNOI2002]营业额统计[BST]

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 14151  Solved: 5366[Submit][Sta ...

  6. 洛谷P2964 [USACO09NOV]硬币的游戏A Coin Game

    题目描述 Farmer John's cows like to play coin games so FJ has invented with a new two-player coin game c ...

  7. Java设计模式之单例

    一.Java中的单例: 特点: ① 单例类只有一个实例 ② 单例类必须自己创建自己唯一实例 ③ 单例类必须给所有其他对象提供这一实例 二.两种模式: ①懒汉式单例<线程不安全> 在类加载时 ...

  8. 【.NET实战教程】北风网基于ASP.NET多层架构下的企业级进销存软件全程培训

    .Net进销存系统详细课程大纲(开发工具采用VS2008+sqlsever2005) [小编提醒:现在学习的话,可以使用vs2012+sql 2008 学习的是思路,教学环境不一定要一模一样]1.项目 ...

  9. Web 开发中很实用的10个效果

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  10. 浅谈 underscore 内部方法 group 的设计原理

    前言 真是天一热什么事都不想干,这个月只产出了一篇文章,赶紧写一篇压压惊! 前文(https://github.com/hanzichi/underscore-analysis/issues/15)说 ...