阿里巴巴iconfont怎么是正确的使用方式?
思韵闪耀
2017-12-08
0

图标的制作和上传可以参照官网给出的文档:阿里巴巴文档
图标的下载和使用官网上说的不是很清楚,简单介绍下:
1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”

2.选择完所有要用的图标后“存储为项目”,给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目,获取在线链接,把里面的代码复制到CSS中。

3.在HTML中需要使用到图标时,使用iconfont类名。
<i class="iconfont">&#xe600;</i>
里面写上你想用的图标下面的Unicode:


4.然后你可以通过控制iconfont类的属性改变图标的样式,比如:
.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
}
就可以在页面中引用和修改了。



官网中还列出了使用时候的兼容性问题及其解决方法:阿里巴巴文档


这些图标也可以下载到本地使用。图标都加入暂存架后选择“下载到本地”,会得到以下几个文件:

浏览器打开demo.html可以看到每个图标的Unicode,把iconfont.css里的代码复制到css里面,把下面四个文件放到css可以引用到的文件夹里就可以了。下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件,如果是在线链接只要重新生成一次链接就好了。



【版权声明】
本站部分内容来源于互联网,本站不拥有所有权,不承担相关法律责任。如果发现本站有侵权的内容,欢迎发送邮件至masing@13sy.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

NIC

相关内容

firewall-cmd ...
firewalld的简要说明:firewalld 、firewal...
2024-03-15
续订Exchange Se...
每个证书都有内置的到期日期。 在Exchange Server中,...
2022-09-16
Dsmod示例及用法
Dsmod 在目录中修改特定类型的现有对象。 dsmod 命令包括...
2022-09-15
CentOS kernel...
CentOS kernel panic后自动重启 这段时间公司有几...
2022-04-28
SQL 代理服务无法启动
SQL 代理服务无法启动 问题现象 如下是系统日志和SQL Age...
2022-03-25
CentOS7设置中文字符...
一、字符编码和字符集 1、字符编码(character encod...
2022-03-05

热门资讯

Invalid left-ha... 写一个提交函数的时候,发现函数不生效,F12之后看到Invalid left-hand side i...
响应图片(Responsive... 一、开门见山 响应图片技术可以说是响应布局衍生出来的一个小分支。说白了,就是不同显示器宽度下调用不同...
轻松删除MetInfo CMS... 第一步:首页底部版权,模板文件foot直接删除; 第二部:首页头部generator版权,\publ...
ckplayer6.3如何替换... 1.刚打开播放器,视频在缓冲时播放器中间的LOGO怎么替换?(如下图) 2.视频播放器右上角的CK ...
inDensity,inTar... 如果接触Android中的Bitmap较深的话,肯定会知道标题上的这三个属性值,那么这三个属性值的关...
JS 验证 利用Javascript中每个对象(Object)的prototype属性我们可以为Javascri...
在文本框中输入时保证总是在最... 那就要在keypress时保证文本框的光标在尾部,而文本框value赋值后其光标默认在最后,故可采用...
微信UA Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5...
检测大写锁定键(Caps Lo... h1检测大写锁定键/h1form action="#" method="post" p label ...
iframe高度自适应,全屏,... !注意此方法用于同一个域名下,可能需要部署在服务器上才能看出效果 !DOCTYPE html PUB...