阿里矢量图~!import

Posted 远菇凉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阿里矢量图~!import相关的知识,希望对你有一定的参考价值。

  阿里iconfunt官网对于图标的调用写的不够详细,许多初用者不会用,下面具体介绍下总结的两种方法:

一、在线调用方式

1、首先建立新浪微博账号,用微博号登录iconfunt官网;  

2、所需要图标加入购物车 ;
3、存储为项目;
4、获取在线链接、生成在线链接;
5、选择fontclass在线css模式;
6、把在线链接粘贴到link标签;
7、用.iconfont如上,在里边随意修改样式;
8、在html中需要的位置写<i class="iconfont">此处写图标的编号&#...;</i>;

demo:

  

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://at.alicdn.com/t/font_1461119990_7929926.css" type="text/css" rel="stylesheet"/>
<style>


.iconfont{
font-family:"iconfont";
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:20px 
}

</style>
</head>
<body>
<i class="iconfont">&#xe600;</i>

</body>
</html>

二、离线调用方式

  此方法需要本地下载iconfunt官网demo,然后如下,

切记要把demo里.ttf和.woff亮哥文件引入即可:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>

@font-face {font-family: "iconfont";
src: url(\'iconfont.eot?t=1461117480\'); /* IE9*/
src: url(\'iconfont.eot?t=1461117480#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
url(\'iconfont.woff?t=1461117480\') format(\'woff\'), /* chrome, firefox */
url(\'iconfont.ttf?t=1461117480\') format(\'truetype\'), /* chrome, firefox, opera, Safari, android, ios 4.2+*/
url(\'iconfont.svg?t=1461117480#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-icon1460345725196:before { content: "\\e61d"; }
</style>
</head>
<body>
<div class="box">
<i class="iconfont">&#xe600</i>
</body>
</html>

 

 

一定一定要记得加link里面的链接~妥妥测了一晚上,蓦然回首才发现可爱的寄几一直没加链接!

还有相当重要的一句话:这篇博客是转载的 只有下面两句是博主的原创  啊哈哈哈  原文作者:

文艺范儿m

 

以上是关于阿里矢量图~!import的主要内容,如果未能解决你的问题,请参考以下文章

为啥阿里巴巴矢量图网站进不去,别人都能进?

阿里巴巴矢量图库里面的图标可以作为商业用途么

决定要收藏,让你白嫖阿里矢量图(iconfont矢量图使用)

阿里矢量图iconfont的使用方法

阿里矢量图怎么用(转)

weex用阿里矢量图