首页 > 代码库 > 阿里iconfont引入方法
阿里iconfont引入方法
第一步:使用font-face声明字体
@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的样式
<pre>
.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="iconfont">&#x33;<>
代码html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>icon</title> <link rel="stylesheet" href="http://www.mamicode.com/css/iconfont.css"> </head> <style> i:nth-of-type(1){ font-size: 100px; color: #333; } i:nth-of-type(2){ font-size: 200px; color: #1a1a1a; line-height: 300px; } </style> <body> <i class="iconfont">󰂥</i> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> </body> </html>
css
@font-face {font-family: "iconfont"; src: url(‘iconfont.eot?t=1471336647‘); /* IE9*/ src: url(‘iconfont.eot?t=1471336647#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */ url(‘iconfont.woff?t=1471336647‘) format(‘woff‘), /* chrome, firefox */ url(‘iconfont.ttf?t=1471336647‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url(‘iconfont.svg?t=1471336647#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; } .icon-nav:before { content: "\f00a5"; } .icon-nav1:before { content: "\e601"; } .icon-nav2:before { content: "\e608"; } .icon-nav3:before { content: "\e6bf"; } .icon-nav4:before { content: "\e659"; }
阿里iconfont引入方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。