美文网首页工作生活
icon 引用的几种方式

icon 引用的几种方式

作者: _嘿嘿_ | 来源:发表于2019-07-01 21:25 被阅读0次

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>

相关文章

  • icon 引用的几种方式

    fontclass引用,最常见引用 1. 内容如下 @font-face {font-family: "iconf...

  • ICON的几种实现方式

    需求:一个页面上有很多小图标 一,image 使用image来实现,要注意的问题: img的大小设置 img的ve...

  • icon的几种实现方式

    在网页中有许多的icon,购物车,搜索...等等诸如此类,实现的方法也很简单,给一个元素设置背景图就可以实现了,然...

  • npm 几种方式引用包

    1.npm仓库,常用的不说了2.git地址直接使用 本地文件直接使用npm install ./文件夹image....

  • CSS:css引用的几种方式

    1、行内引用,即直接将css样式写在标签中的style属性里2、嵌入引用,即将样式规则写在页面中的 标签里3、外部...

  • mui 图标显示不出来解决方案

    mui 自己是有自带的 icon 图标的 他是把小图片存在字体里面然后在用引用字体的方式来 读出图标的。 我引用了...

  • React Native StryleSheet 实践总结

    1) 引入样式 2) 创建样式 3) 调用样式的几种方式 单个样式引用(对象) 多个样式引用(数组) 条件样式 ...

  • coocs creator模块化

    cocos creator模块化的几种方式: 方式一 Rotate.js 在helloworld.js中进行引用,...

  • 引用图标icon

    import { ExclamationCircleOutlined, MinusCircleOutlin...

  • Block循环引用的几种解决方式

    1. 循环引用是如何产生的 循环引用顾名思义就是相互直接或间接强引用达成了一个环,造成了相互持有(eg:A--B ...

网友评论

    本文标题:icon 引用的几种方式

    本文链接:https://www.haomeiwen.com/subject/tktocctx.html