我们以阿里巴巴矢量图标库举例，地址：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. SQLServer中修改字段为空

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

  2. 【转】70个经典的 Shell 脚本面试问题

    我们为你的面试准备选择了 70 个你可能遇到的 shell 脚面问题及解答.了解脚本或至少知道基础知识对系统管理员来说至关重要,它也有助于你在工作环境中自动完成很多任务.在过去的几年里,我们注意到所有 ...

  3. mybatis 动态sql表达式相关应用

    一.mybatis 表达式简介 对于mybatis3 ,提供了一种动态sql的方式.通过动态sql我们可以直接在mybatis 的xm映射文件中直接通过条件判断的方式进行查询添加的拼接.mybatis ...

  4. Echarts 之三 —— 地市联动数据统计二

    一.简介 除了是一个地图之外,我们也可以使用多地图进行地市.区县联动数据统计.需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该地市区县的数据信息.二 ...

  5. Tips for Planning Your Business Startup

    原文链接:http://domaintree.me/?p=1037 By Robert Thibodeau –  Starting a business can be a very daunting ...

  6. wubi安装ubuntukylin-14.04

    自ubuntukylin-14.04发布以来一直想体验一下,正好五一休假有了时间,在经历了一番坎坷后终于安装成功.安装环境为Win7家庭高级版,至于采用wubi方式安装,只因Linux水平差和图省事, ...

  7. Eclipse下还原删除的文件

    做项目的时候,不小心把Eclipse下的么个文件删除了,虽然有svn但是最新修改的代码没有提交,怎么办,在网上查了下,eclipse是可以还原删除文件的.具体做法如下所示 恢复删除的文件 1 在项目上 ...

  8. JQuery记住用户名和密码的具体实现

    代码如下: //初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "tr ...

  9. linux init 启动顺序

    redhat init大致启动过程 第一个运行的程序是/sbin/init,该文件会读取/etc/inittab文件,并依据此文件来进行初始化工作.比如在设定了运行等级 “:id:3:initdefa ...

  10. phpqrcode 生成二维码

    这个项目需要根据信息来自动生成二维码,到网上搜了下,发现php有生成二维码的类库phpqrcode,所以打算就用这个来生成二维码 从官网下载类库源码http://sourceforge.net/pro ...