阿里矢量图标怎么使用?教你阿里矢量图标使用方法

阿里矢量图标怎么使用?当我们需要使用一些矢量图标img文件的话该如何进行使用呢?本文中winwin7小编给大家分享介绍下阿里矢量图标使用方法,有需要的用户快来试试吧!

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

阿里矢量图标使用方法

1、首先选择去图标库自行选择想要的图标;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

2、选择图标,点击图标变成橘色,即放在暂存架;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

3、选择好要用的图标后,点击暂存架的下载至本地,解压待用;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

4、将下载完的文件解压后,放到某一文件夹中,右键打开demo_unicode.html文件;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

5、把上述文件中的代码复制到自己的项目中:

@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值就是上面样式中的class!

关于阿里矢量图标使用方法就给大家介绍到这里,有需要的用户快来试试吧!

本文来自互联网或AI生成,不代表系统内阁立场。本站不负任何法律责任。

如若转载请注明出处:https://www.system.cab/tutorials/80326.html

热心网友的头像热心网友
上一篇 2025-04-09 13:38
下一篇 2025-04-09 13:38

相关推荐

无论是个人用户还是专业人士,都能在这里找到适合自己的系统版本。
本站[系统内阁]所有内容来自互联网投稿或AI智能生成,并不代表[系统内阁]的立场。