关于如何使用阿里巴巴iconfont
一、首先进入官网 www.iconfont.cn
二、选择你喜爱的字体样式
三、点击加入购物车(别担心,还没交钱,哎嘿嘿Q~Q)
四、点击右上角购物车,浏览器左侧会出现一栏,点击其中的添加至项目(如果还没有项目可以新建一个)
五、可选择三种想要的下载形式 ,然后点击下载至本地,之后解压
六、接下来说明一下三种使用方法
① 使用源码:将解压后文件夹拖拽到项目目录下,CSS中添加如下代码
@font-face {
font-family: 'aliIconfontCode'; /* 此处是定义字体的名称可随意更改*/
src: url('alifont/iconfont.eot'); /*以下代码可复制粘贴但是注意目录结构*/
src: url('alifont/iconfont.eot?#iefix') format('embedded-opentype'),
url('alifont/iconfont.woff2') format('woff2'),
url('alifont/iconfont.woff') format('woff'),
url('alifont/iconfont.ttf') format('truetype'),
url('alifont/iconfont.svg#iconfont') format('svg');
font-style: normal;
font-weight: normal;
}
.aliIconfontCode{
font-family: "aliIconfontCode";
font-size: 100px; /*字体大小*/
color: pink; /*字体颜色*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<span class="aliIconfontCode"></span> /*找到你选择的字体样式码填在你想添加的地方*/
② 使用封装好的类:将解压后文件夹拖拽到项目目录下,添加如下代码
<link rel="stylesheet" href="alifont/iconfont.css"> /*代码中引入封装好的CSS*/
<span class="iconfont icon-zhanghuguanli" style="font-size: 100px;color: purple"></span> /*代码中添加类*/
③ 使用svg渲染出原有的漂亮颜色:将解压后文件夹拖拽到项目目录下,添加如下代码
<script type="text/javascript" src="alifont/iconfont.js"></script> /*代码中引入js*/
.aliSymbol{ /*CSS 中添加样式*/
width: 100px;
height: 100px;
/*vertical-align: top;*/
fill: currentColor;
overflow: hidden;
}
<svg class="aliSymbol" aria-hidden="true">
<use xlink:href="#icon-zhanghuguanli"></use>
</svg>
此外再提供个好的网站,也有矢量图库可供参考:https://icomoon.io/