阿里字体图标使用方法
程序员文章站
2022-04-23 15:38:02
...
登录阿里字体:http://www.iconfont.cn/collections/index
选择字体并添加入库
点击购物车按钮,如果没项目则新建项目,有项目就加入当前项目
生成css代码:
@font-face {
font-family: 'iconfont'; /* project id 581285 */
src: url('//at.alicdn.com/t/font_581285_v1m7utq8medpwrk9.eot');
src: url('//at.alicdn.com/t/font_581285_v1m7utq8medpwrk9.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_581285_v1m7utq8medpwrk9.woff') format('woff'),
url('//at.alicdn.com/t/font_581285_v1m7utq8medpwrk9.ttf') format('truetype'),
url('//at.alicdn.com/t/font_581285_v1m7utq8medpwrk9.svg#iconfont') format('svg');
}
定义字体class名
.icon-font{
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;
color: blue;
}
<i class="icon-font"></i>