字体包下载到本地:
<!--本地使用,没联网也能使用,字体图标已经存在本地了-->
<!--<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>-->
<!--这个外链,引用的是阿里的服务器数据,没联网使用不了-->
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_sb6e86lbm3n5ewmi.css"/>
<!--本地使用,没联网也能使用 JS方式,支持彩色-->
<!--<script src="iconfont/iconfont.js" type="text/javascript" charset="utf-8"></script>-->
<!--外链,引用额阿里的服务器数据,没联网使用不了-->
<script src="//at.alicdn.com/t/font_3ma82gklkgrs5rk9.js" type="text/javascript" charset="utf-8"></script>
<
style type="text/css"
>
.o {font-size: 300px;color: red;}.w {font-size: 100px;color: plum;}.icon-huangguan {font-size: 66px;}.icon-iconfonthuangguan {font-size: 30px;}.hg {font-size: 20px!important;}</style>
<style type="text/css">/*JS格式设置子图图标属性*/.icon {/* 通过设置 font-size 来改变图标大小 */font-size: 50px;width: 2em;height: 2em;/* 图标和文字相邻时,垂直对齐 */vertical-align: -0.15em;/* 通过设置 color 来改变 SVG 的颜色/fill */color: red; /*改变不了多彩图标,只能改变纯色图标*/fill: currentColor;/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示normalize.css 中也包含这行 */overflow: hidden;}</style></head><body><div id="box"><div class="xixi"><!--第一种用法--><i class="iconfont o"></i><br /><i class="iconfont w"></i><!--第二种用法--><i class="iconfont icon-huangguan"></i><i class="iconfont icon-iconfonthuangguan"></i><!--第三种方式--><!--纯色图标--><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huangguan" class="hg"></use></svg><!--多彩图标--><svg class="icon" aria-hidden="true"> <!--多彩图标只能JS引进,其他方式引进--><use xlink:href="#icon-26"></use></svg></div></div></body></html>