我们以阿里巴巴矢量图标库举例，地址：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. Linux SSH登录慢案例分析

    手头有台Linux服务器ssh登录时超级慢,需要几十秒.其它服务器均没有这个问题.平时登录操作都默默忍了.今天终于忍不住想搞清楚到底什么原因.搜索了一下发现了很多关于ssh登录慢的资料,于是自己也学着 ...

  2. 聊下git merge --squash

    你经常会面临着将dev分支或者很多零散的分支merge到一个公共release分支里. 但是有一种情况是需要你处理的,就是在你的dev的分支里有很多commit记录.而这些commit是无需在rele ...

  3. 【C++】输入多行数字到数组

    前天做某公司笔试题的时候,其输入格式是多行数字,每行以空格为分隔符,以换行符号为结束输入到多个数组.在JAVA中有相应的函数直接将一行拆成数组,感觉在C++中这中输入方式还是挺奇怪的,今天想出一种解决 ...

  4. Java 多态

    多态通过分离做什么和怎么做,从另一个角度将接口和实现分离开来. 继承允许将对象视为它自己本身的类型活基类型来加以处理. 方法调用绑定 绑定: 将一个方法调用同一个方法主体关联起来. 前期绑定:在程序执 ...

  5. 安装 Visual Studio Web Tools 的奇怪问题

    安装Microsoft ASP.NET 5 RC 1 时提示 0x80070005 - 拒绝访问 日志文件为 [1968:3F64][2015-11-20T10:08:36]i010: Launchi ...

  6. Jenkins学习三：介绍一些Jenkins的常用功能

    Jenkins其实就是一个工具,这个工具的作用就是调用各种其他的工具来达成你的目的. 1.备份.迁移.恢复jenkins 首先找到JENKINS_HOME,因为Jenkins的所有的数据都是以文件的形 ...

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

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

  8. LAMP.md

    LAMP Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,但是因为常被放在一起使用,拥有了越来越 ...

  9. WPScan用法

    kali下集成的WPScan用法 1.刺探基础信息:wpscan --url http://www.example.com 2.猜解后台用户名wpscan --url http://www.examp ...

  10. codevs 2924 数独挑战

    2924 数独挑战 http://codevs.cn/problem/2924/ 题目描述 Description "芬兰数学家因卡拉,花费3个月时间设计出了世界上迄今难度最大的数独游戏,而 ...