【前端学习】iconfont阿里字体使用

【前端学习】iconfont阿里字体使用

【前端学习】iconfont阿里字体使用

1.引用线上地址-阿里服务器保管(这是链接可以浏览器中打开)【前端学习】iconfont阿里字体使用

可用浏览器打开(加上前缀http:)

【前端学习】iconfont阿里字体使用

得到【前端学习】iconfont阿里字体使用

代码中使用:

【前端学习】iconfont阿里字体使用
注:更改图标的类名

【前端学习】iconfont阿里字体使用【前端学习】iconfont阿里字体使用

更改后重新获取网页链接--重新引入链接--重新写类名

【前端学习】iconfont阿里字体使用

报错:没有显示的话,Chrome调试工具f12,看看右边有没有

【前端学习】iconfont阿里字体使用

下载下来的文件夹只需要把这几个放到项目中(同一层目录的哟,因为css这么引用的)

【前端学习】iconfont阿里字体使用

2.下载到电脑-引用本地地址

link的路径换一下(确保上面那几个文件在同一层哦)

other:自己设计图标库的网站是icomoon

它将svg图片转换为font字体

3.麻烦的引用方式

【前端学习】iconfont阿里字体使用

【前端学习】iconfont阿里字体使用

下面这些可以从这儿复制-->【前端学习】iconfont阿里字体使用

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

}