<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<script src="iconfont.js"></script>
<style type="text/css">
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jibenxinxi"></use>
</svg>
<div class="name">基本信息</div>
<div class="fontclass">#icon-jibenxinxi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huojian"></use>
</svg>
<div class="name">火箭</div>
<div class="fontclass">#icon-huojian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rocket"></use>
</svg>
<div class="name">火箭</div>
<div class="fontclass">#icon-rocket</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tongjifenxi"></use>
</svg>
<div class="name">统计分析</div>
<div class="fontclass">#icon-tongjifenxi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tongjifenxi-copy"></use>
</svg>
<div class="name">统计分析</div>
<div class="fontclass">#icon-tongjifenxi-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jingzhunhuice"></use>
</svg>
<div class="name">精准回测</div>
<div class="fontclass">#icon-jingzhunhuice</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jibenxinxi1"></use>
</svg>
<div class="name">基本信息</div>
<div class="fontclass">#icon-jibenxinxi1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tongjifenxi1"></use>
</svg>
<div class="name">统计分析</div>
<div class="fontclass">#icon-tongjifenxi1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jingzhunfupin"></use>
</svg>
<div class="name">精准扶贫</div>
<div class="fontclass">#icon-jingzhunfupin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jibenxinxidiqu"></use>
</svg>
<div class="name">基本信息-地区</div>
<div class="fontclass">#icon-jibenxinxidiqu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chaxun"></use>
</svg>
<div class="name">查询</div>
<div class="fontclass">#icon-chaxun</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weibiaoti108"></use>
</svg>
<div class="name">金融扶贫</div>
<div class="fontclass">#icon-weibiaoti108</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weibiaoti104"></use>
</svg>
<div class="name">精准对接</div>
<div class="fontclass">#icon-weibiaoti104</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fuchidai-copy-copy"></use>
</svg>
<div class="name">扶持贷</div>
<div class="fontclass">#icon-fuchidai-copy-copy</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixuanzhongjingzhunfupin"></use>
</svg>
<div class="name">未选中-精准扶贫</div>
<div class="fontclass">#icon-weixuanzhongjingzhunfupin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chaxun1"></use>
</svg>
<div class="name">查询</div>
<div class="fontclass">#icon-chaxun1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiaoliu"></use>
</svg>
<div class="name">交流</div>
<div class="fontclass">#icon-jiaoliu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aixinbangfu"></use>
</svg>
<div class="name">爱心帮扶</div>
<div class="fontclass">#icon-aixinbangfu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jingzhun"></use>
</svg>
<div class="name">精准</div>
<div class="fontclass">#icon-jingzhun</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jingzhunrenqunyingxiao"></use>
</svg>
<div class="name">精准人群营销</div>
<div class="fontclass">#icon-jingzhunrenqunyingxiao</div>
</li>
</ul>
<h2 id="symbol-">symbol引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>�
HTML5简约大气的多级导航菜单.rar
需积分: 44 109 浏览量
2019-07-10
18:39:18
上传
评论
收藏 136KB RAR 举报
nvachange.rar （20个子文件） 
srcfans.com nvat images 
bg.png 10KB text.png 16KB
nav.html 6KB src 
jquery.min.js 94KB .idea nvat.iml 281B misc.xml 836B .name 4B modules.xml 260B encodings.xml 159B workspace.xml 12KB icon iconfont.eot 19KB iconfont.ttf 19KB
iconfont.svg 21KB iconfont.js 57KB demo_unicode.html 8KB iconfont.woff 12KB demo_fontclass.html 7KB demo_symbol.html 9KB demo.css 6KB iconfont.css 2KB资源评论
