fontclass引用,最常见引用
1.<link rel="stylesheet" href="iconfont.css">
内容如下
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1494396568506'); /* IE9/
src: url('iconfont.eot?t=1494396568506#iefix') format('embedded-opentype'), / IE6-IE8 /
url('iconfont.woff?t=1494396568506') format('woff'), / chrome, firefox /
url('iconfont.ttf?t=1494396568506') format('truetype'), / chrome, firefox, opera, Safari, Android, iOS 4.2+/
url('iconfont.svg?t=1494396568506#iconfont') format('svg'); / iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-zujitupian:before { content: "\e600"; }
//content
<glyph glyph-name="zujitupian" unicode="" horiz-adv-x="1000"
d="M266.5 484q63.5 0 108.5 45t45 108.5t-45 108.5t-108.5 45t-108.5 -45t-45 -108.5t /glyph >
2.使用
<i class="iconfont icon-zujitupian"></i>
symbol引用
<script src="iconfont.js"></script>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zujitupian"></use>
</svg>
unicode引用
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
<i class="icon iconfont"></i>
网友评论