大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
听说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
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/200728.html原文链接：https://javaforall.net
