首页 > 玩机美化 > 【小白教程】教你阿里矢量图标使用方法

【小白教程】教你阿里矢量图标使用方法

楼主:火♚族✨弑天 [1级] · 2019-12-13 ·  浏览836 · 玩机美化 · ID:

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

image.png

阿里矢量图标使用方法

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

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

image.png

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!

- 版权声明 - 1、本帖所有言论和图片等纯属网友个人意见,与流星社区立场无关;
2、其他单位或个人使用、转载或引用本帖时必须同时征得该帖子作者火♚族✨弑天流星社区的同意;
3、备注原文地址:https://bbs.liuxingw.com/t/19683.html,可忽略第2条;
4、帖子作者需承担一切因本文发表而直接或间接导致的相关责任;
5、如本帖内容或部分内容转载自其它媒体,这并不代表本站赞同其观点和对其真实性负责;
6、如本帖若为资源类,将仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您安装或使用的设备中彻底删除上述内容;
7、如果您喜欢该程序,请支持正版软件,购买注册,可以得到更好的正版服务;
8、如本帖侵犯到任何版权或违法问题,请立即邮件告知我们,我们将及时予以处理。
2条回复 |  最后回复于2019-12-13

蚂蚁之家 [2级]

已经学到了,谢谢楼主。
发布于2019-12-13

回复列表

  • 内容加载中...

说点什么...

草泥马 [2级]

有的,要钱吧
发布于2019-12-13

回复列表

  • 内容加载中...

说点什么...
登录注册 后才可进行评论
签到
20人签到
已签0天
  • 46540帖子
  • 1935816热点量
  • 184579火热值