CSS——引入阿里字体图标步骤

第一步 下载图标:

在阿里矢量图标库(http://www.iconfont.cn)内搜索需要的图标,选中点击添加入库

选择完成后,右上角库中点击下载代码:

下载完成后解压文件生成一个文件夹。

将文件夹中iconfont.css文件复制到项目css文件夹中,这4个图标文件复制到项目fonts文件夹中。

第二步 声明:

使用阿里图标需在css中声明,代码如下:

@font-face {
  font-family: 'iconfont';
  src: url("../fonts/iconfont.eot");
  src: url("../fonts/iconfont.eot?#iefix") format('embedded-opentype'),
  url("../fonts/iconfont.woff") format('woff'),
  url("../fonts/iconfont.ttf") format('truetype'),
  url("../fonts/iconfont.svg#iconfont") format('svg');
}

注意:以上url路径为我的路径,使用需要自行更改,另外不知为何我这里路径要用双引号才能正确显示图标,单引号不能显示。

定义字体图标样式:

.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;
}

第三步 引入图标:

打开文件夹中文件,复制字体图标unicode码,使用如下代码应用于页面:

<i class="iconfont">&#x33;</i>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页