您的位置：首页 > Web前端 > HTML

在html中使用fontIcon 的图标

2016-02-19 15:03 489 查看

听说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>


<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>

<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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： font icon

相关文章推荐

新的分享

章节导航