在html中使用fontIcon 的图标

听说fontIcon 显现图形比 img要高。然后它是以矢量图的相似呈现，放大不会失真。在今天开发中发现，公司有人使用了这项技术。。所以也就花时间学习了一下。。

在学过程中看了几篇文章之后完成的。。这里也推荐下：

1 http://www.chinaui.com/Knowledge/20120907/14021209040007.shtml (里面有demo, 和更重要的图形转化在线工具：iconmoon)

2 http://iconfont.cn/ 阿里图形库, 这里提供了很多图形源，可以通过这个地方下载SVG 文件到 iconmoon 进行转化。

3 http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/( icommon使用教程)

html引用代码片段

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><!--通过样式引入 font icon 图标--><link rel="stylesheet" href="font/iconfont.css"></link><style type="text/css">ul li{cursor: pointer;list-style-type: none;line-height: 30px;}</style><style>@font-face {font-family: 'icomoon';src:    url('fonts/icomoon.eot?b7b2qy');src:    url('fonts/icomoon.eot?b7b2qy#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?b7b2qy') format('truetype'),url('fonts/icomoon.woff?b7b2qy') format('woff'),url('fonts/icomoon.svg?b7b2qy#icomoon') format('svg');font-weight: normal;font-style: normal;}/*通过样式加 content呈现图标 如：  <i class="iconfont"></i> */[class^="icon-"], [class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'icomoon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/*通过样式呈现图标  <i class="icon-im"></i> */.icon-im:before {content: "\e900";}</style></head><body><ul><li><!--通过样式加 content呈现图标--><i class="iconfont"></i></li><li><!--通过样式呈现图标--><i class="icon-im"></i> </li><li>天猫</li><li>京东</li><li> 3g  </li><li> 4g  </li><li><input type="radio" name="t">速率<input type="radio" name="t">时延</li><li>地图  </li></ul></body></html>

难点：

1 如何获取SVG 格式的矢量图

2 如何将SVG 的图标绑定地址如：\e900 如如何来得？

3 转化编辑工具的选择，网上有很多，安装文件很大。选择是个麻烦的事情

具体操作步骤：

1 去http://iconfont.cn/ 图库找一个图标，然后以SVG格式下载下来。

2 通过icommon 教程了解如何使用它

3 利用icommon 在线工具将你的SVG 转化为需要的格式，最后下载转化完成的包

4 参考里面的demo 引用图标。。

具体实现代码：http://download.csdn.net/detail/tarenahuangdw/9436695

在html中使用fontIcon 的图标相关推荐

阿里巴巴fonticon字体图标的使用
很早之前就知道阿里巴巴的fonticon矢量图标库,以前是这么使用的:下载某个图标的.png格式,然后引用到项目中,通过img标签或者background来使用.当然我知道该矢量图库可以将图标转换为字 ...
在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...
如何取消掉计算机更新图标,XP系统如何关闭右下角中的自动更新图标？
相信大家在使用XP系统中,都有遇到过电脑右下角总是弹跳出"您的计算机可能存在风险"这是怎么回事呢?其实这是因为是系统关闭了系统自动更新,那么遇到这种问题该怎么解决呢?其实我们只要把 ...
在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
[react] 在React中怎么使用字体图标？
[react] 在React中怎么使用字体图标? 1.npm install --save react-fontawesome 2.npm install font-awesome 3.import ...
在ubuntu中为程序添加图标快捷键
2019独角兽企业重金招聘Python工程师标准>>> 比如我在我的ubuntu上安装了javaEE eclipse,这个软件直接解压就可以用,这时在导航栏里没有对应图标,在左上角的 ...
html+字体图标找不到字体,bootstrap中不显示字体图标问题怎么解决？
bootstrap中不显示字体图标的原因是什么?怎么解决?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 你在使用bootstrap字体图标的时候,是否遇 ...
安卓开发使用ttf文字_Android中正确使用字体图标(iconfont)的方法
字体图标字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适 ...
VS中更改exe程序图标
1.右击项目-打开属性 2.在应用程序中选择或更改图标文件 3.保存即可,之后打包生成的程序图标就会换成相应的文件,具体打包步骤看我另一篇博客.

在html中使用fontIcon 的图标

在html中使用fontIcon 的图标相关推荐

最新文章

热门文章