如何使用iconfont字体代替小图片?
我们以阿里巴巴矢量图标库举例,地址: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"></span> <span class="iconfont"></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字体代替小图片?的更多相关文章
- 如何利用iconfont图标代替小图片
1.首先 你要有一个阿里巴巴矢量图这个网站的账号:http://www.iconfont.cn/ 在这里注册哦~ 2.蓝后 可以在首页搜索你想要的图标,比如 我想放一个管理员的图标在页面上: 就要点击 ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- css 小图标 & iconfont 字体图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- 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); ...
- 分享:录制gif小图片工具
今天博主分享一个录制gif小图片的工具[LICEcap]: 有的时候,图片解释起来不够直观,如果是一段小动画,别人一看就懂了. 工具我放在百度网盘上面,当然也可以自己在网上下载. 下载地址:http: ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- Win7下Eclipse中文字体太小
http://www.cnblogs.com/newdon318/archive/2012/03/23/2413340.html 最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认 ...
- Atitit 判断判断一张图片是否包含另一张小图片
Atitit 判断判断一张图片是否包含另一张小图片 1. keyword1 2. 模板匹配是在图像中寻找目标的方法之一(切割+图像相似度计算)1 3. 匹配效果2 4. 图片相似度的算法(感知哈希算 ...
- Cool!12幅由小图片组成的创意图像重组作品
这里分享15幅创意插图作品,这些创意插图作品都是有成千上万的小图片组成的,很多创意广告会采用这个形式的设计.下面这组创意作品的作者是 Charis Tsevis,来自希腊的视觉设计师,擅长图像重组的创 ...
随机推荐
- 如何查看Windows服务器运行了多长时间
前言:有时候管理.维护Windows服务器需要定期重启服务器(为什么需要重启,你懂的),但是这个"定期"有时候会受很多因素影响,例如某台服务器忘了重启:某台服务器那个时间段业务繁忙 ...
- 一则uiautomation错误处理
一款iphone程序,用到了多window,结果在最后一个window里设置textfield时出错 target.frontMostApp().mainWindow().textFields()[0 ...
- 设置 Unix,Linux环境下的NLS_LANG
设置 NLS_LANG 变量 1) 正确配置 LC_ALL 参数 2) 配置 telnet/ssh/SecureCRT 客户端的字符集 linux中可以用locale命令来查看 NLS_LANG设置, ...
- 基础SQL语句/语法
SQL是现在进入互联网工作人们的必须技能之一,下面分享自己觉得很nice的SQL基本语句,从网上找了,觉得很不错,就分享给大家!简要介绍基础语句: 1.说明:创建数据库 Create DATABAS ...
- 《InsideUE4》-9-GamePlay架构(八)Player
你们对力量一无所知 引言 回顾上文,我们谈完了World和Level级别的逻辑操纵控制,如同分离组合的AController一样,UE在World的层次上也采用了一个分离的AGameMode来抽离了游 ...
- C#学习笔记-数据的传递(公共变量)以及Dictionary
看的代码越多,写的代码越多,就越是享受这些字符,终于渐渐懂得了那种传闻中的成就感,特别是自己从看不懂然后一步一步学,一个代码一个代码地敲,最后哪怕只是完成了一个小功能,也都是特别自豪的!这种自豪不用告 ...
- faster_rcnn c++版本的 caffe 封装,动态库(2)
摘要: 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ github上的代码链接,求给星星:) https:// ...
- 第12章 Java字符串
1.什么是Java中的字符串 字符串String并不是一种数据类型,而是一个类对象,在java.lang包中,只不过在默认情况下java都是自动导入的,所以可以直接使用创建一个String对象的方法有 ...
- WINDOW的cmd的命令【转载】
转载地址:https://zhidao.baidu.com/question/583956458.htmlwinver---------检查windows版本 wmimgmt.msc----打开win ...
- codeforces 711E. ZS and The Birthday Paradox 概率
已知一年365天找23个人有2个人在同一天生日的概率 > 50% 给出n,k ,表示现在一年有2^n天,找k个人,有2个人在同一天生日的概率,求出来的概率是a/b形式,化到最简形式,由于a,b可 ...