首页 > 编程知识 正文

阿里icon矢量图标,阿里巴巴矢量图标库怎么用

时间:2023-05-04 12:21:57 阅读:36423 作者:3781

1、在蚂蚁贴图库中(http://iconfont.cn/)选择一个或多个喜欢的图标,效果如下图所示

2、网页右上角的小购物车

3、这里决定下载代码。 下载后,在项目需要的地方解压缩。

4、这是我下载的压缩文件和解压缩的文件。

5、下载后,可以看到三个html文件。 我们在浏览器中打开。 他用引入三个图标的方法,我们根据自己的需要自己选择。

6、举个例子,我喜欢个人使用

创建新文件夹。 名字自己取吧。 我的是字体。 放入这四个文件。 与font对等放置iconfont.css

html样式:

. iconfont{ color: blue; }

@font-face {

font-family: 'iconfont ';

SRC:URL(font/iconfont.EOT );

SRC:URL(font/iconfont.EOT? #iefix ' )格式(嵌入式开放)、

URL(font/iconfont.woff ) (格式) woff )、

URL(font/iconfont.TTF ) (格式) (truetype )、

URL(font/iconfont.SVG#iconfont ) (格式) (SVG );

}

. iconfont{

font-family:'iconfont '! 导入;

font-size:16px; 字体样式: normal;

微信字体智能: antialiased;

- WebKit-text-stroke-width :2 px;

- moz-OS x-font-smoothing : gray scale;

}

body中

实体

ul

lia href=' '! - iclass=' iconfonticon-yifu '/I-- 1男装/女装/a/li

lia href=' '! - span class=' iconfonticon-15 '/span---- 2鞋/包/a/li

lia href=' ' iclass=' icon font ' # x e666; /i3家具/a/li

lia href=' ' iclass=' icon font ' # xe60f; /i4家具/a/li

lia href=' ' iclass=' icon font ' # x 3446; /i5家具/a/li

/ul

/body

所有这些图标都可以视为字体,与文字相同,例如改变颜色大小。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。