借鉴百度对此标题的评价:

使用字体图标的优势

字体图标除了图像清晰度之外,比位图还有哪些优势呢。

适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小。一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。

可扩展性:图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标,然而,使用位图,你必须得为每个不同大小的图像输出一个不同文件。

灵活性:文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。他们还可以在任何背景下显示。

兼容性:网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里。

根据http://iconfont.cn/help/platform.html   该网址内容的介绍,我们一步步来。

第一步

选出一个你的小图标,放入PS 或者其他什么图片转换工具将图片转换成  SVG格式的图片(如果没看到SVG格式,说明你的PS工具版本太低啦)  然后拖到http://iconfont.cn/icons/uploadShow    此页面  上传刚刚的SVG图标

第二步

上传成功后会出现如图所示的样子

然后填写名称和Tag的时候你自己随便填写一个名称   一定要记住名称,然后编辑制作,成功后直接将刚刚的名称放到该网页的搜索框搜索那个名称  你会发现真的存在! 好的,将它加入你的购物车类型的东西,  成功了一半了!!!

第三步

第二步最后也可以不加“购物车”,直接点击下载,点击下载  然后打开  你会发现出现一堆垃圾!但是它可以用  是成功的  

虽然成功了,但是我们还得会调用它!

第四步(调用)

打开你的项目  iconfont.css文件内容复制到项目<style>里面(只要你调用了就OK啦),同样demo.css里面的内容很多垃圾,你只需要复制出自己需要的类的名称的css就可以了

基本就是上面红色窗口的那两串代码而已.....复制到你的页面<style></style>里去!

还没好!!!

什么  .eot .svg .ttf  .woff这几个鬼玩意儿要用的!  将这四个复制到你项目的某个文件夹下,随便取名font文件夹,然后在刚刚的iconfont.css里面修改那几个url的路径,使其对应你存放这四个文件的路径,不要弄错了,这步骤很关键!

如图吧

第五步

在页面上随便弄个标签,给它上面你定义的标签class  名称就好了 <i class="icon iconfont"></i>  icon iconfont样式不要调用错了    这里的。。e600就是对应上面红色窗体的\e600(可自己定义)

PS:聪明的人回想我一次性有几百个图标   那么会不会生成  几百个*4 的  .eot .svg .ttf  .woff 文件呀  !!!  那样太恐怖了,  这时候  我告诉你,直接在下载这个文件的之前,将所有你要制作的图标全部加入你的“购物车”,一次性下载你所需要的图标就好啦,  只有四个那种文件,被封装在一起啦!

你中途突然想换一个图标???  最好不要删除你购物车里面的图标,中途更换,重新制作,然后覆盖原先的 .eot .svg .ttf  .woff 文件 就完成了。

最直接的优点就是  图标的....不对,,现在被转换成字体啦!!字体的颜色 大小  阴影什么的  都可以随便你怎么改动  而且不会让图标 失真哟,,很棒哒,也是很流行的技术,快来试试。  不懂可以追问我哦!

将图标LOGO之类的图形图像转换成字体调用方法大全的更多相关文章

  1. 如何将svg图标快速转换成字体图标?

    今天遇到一个客户需要我将页面的图标做成字体图标,想想哎可能整的麻烦,不过想想这也是对项目的一个优化 ( 1.字体图标直接用color自由控制颜色:2.整合在一起,减少http请求等     PS:平时 ...

  2. ABBYY把pdf转换成word的方法

    有时候我们在网上下载的资料文献是PDF格式文档,遇到喜欢的字句总忍不住想要收藏起来,但是PDF文档不同于普通的Word文档可以直接进行复制粘贴,需要下载安装相关的编辑工具,才能对文字内容进行编辑.倒不 ...

  3. ASP.Net中实现上传过程中将文本文件转换成PDF的方法

    iTextSharp是一个常用的PDF库,我们可以使用它来创建.修改PDF文件或对PDF文件进行一些其他额外的操作.本文讲述了如何在上传过程中将文本文件转换成PDF的方法. 基本工作 在开始之前,我们 ...

  4. C#中对象,字符串,dataTable、DataReader、DataSet,对象集合转换成Json字符串方法。

    C#中对象,字符串,dataTable.DataReader.DataSet,对象集合转换成Json字符串方法. public class ConvertJson { #region 私有方法 /// ...

  5. CAJ转换成PDF在线方法是什么

    做学术性的朋友经常会需要将CAJ文件转换成PDF文件,毕竟CAJ文件只能在CAJ阅读器上显示,但是有很多转换软件并不能很好的完成转换,小编今天就为大家讲解一下CAJ转换成PDF在线方法是什么,大家要认 ...

  6. jquery里把数组转换成json的方法

    首先来看,jquery里自带的,和json相关的函数: 1.$.parseJSON  :  用来解析JSON字符串,返回一个对象. 什么叫“JSON字符串”? 比如: var a={name:&quo ...

  7. 深度学习tensorflow实战笔记(2)图像转换成tfrecords和读取

    1.准备数据 首选将自己的图像数据分类分别放在不同的文件夹下,比如新建data文件夹,data文件夹下分别存放up和low文件夹,up和low文件夹下存放对应的图像数据.也可以把up和low文件夹换成 ...

  8. Android将图像转换成流存储与将流转换成图像

    1.将图片转换成二进制流 public byte[] getBitmapByte(Bitmap bitmap){ ByteArrayOutputStream out = new ByteArrayOu ...

  9. C#将DataTable转换成list的方法

    本文实例讲述了C#将DataTable转换成list及数据分页的方法.分享给大家供大家参考.具体如下: /// <summary>   /// 酒店评论列表-分页  /// </su ...

随机推荐

  1. 使用SVG基本操作API

    前面的话 本文将详细介绍SVG基本操作API,并使用这些API操作实例效果 基础API 在javascript中,可以使用一些基本的API来对SVG进行操作 [NS地址] 因为SVG定义在其自身的命令 ...

  2. poj3723 MST好题 kruskal

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...

  3. PHP之CI框架第一课

  4. GUI(JTabel表格)

    /** * */ package com.niit.javagui; import java.util.Vector; import javax.swing.ImageIcon; import jav ...

  5. 团队作业10--事后分析(Beta版本)

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件的作用是帮助用户实现准确快速的电子文档查重,我们对软件的定义是电子文档查重系统,即通过文 ...

  6. 201521123057 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  7. 201521123022 《Java程序设计》 第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 Q1.finally 题目4-2 Q1.1 截图你的提交结果 ...

  8. 201521123048 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  9. Oracle 修改序列的初始值

    Oracle 序列(Sequence)主要用于生成主键.但是,有时需要修改序列初始值(START WITH)时,好多人凭感觉认为:Alter Sequence SequenceName Start W ...

  10. 超简单的js评价小星星

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...