1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 全网最细 实测可用!Iconfont阿里巴巴矢量库的使用 将icon图标引入前端页面

全网最细 实测可用!Iconfont阿里巴巴矢量库的使用 将icon图标引入前端页面

时间:2021-06-09 08:30:03

相关推荐

全网最细 实测可用!Iconfont阿里巴巴矢量库的使用 将icon图标引入前端页面

Iconfont阿里巴巴矢量库的使用

阿里巴巴矢量库

使用步骤:

(因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐)

先看一下gif图吧,如果看懂了略过步骤①,②,③ 直接看步骤④怎么引入即可

进入网站之后,搜索想要的icon图标;选择所需要的所有icon添加入库,可以点击上方的库存,将所有icon添加到某个项目;在我的项目中,选择刚刚添加的项目,然后点击fontClass即可;引入图标:将生成的CSS的链接地址引入前端样式(注意:复制的地址前要加"http:")。

<link rel="stylesheet" href="/t/font_2177230_n9jezy7z4kq.css">

在页面中引用进来

<i class="iconfont icon-changqun" ></i> // 其中icon-changqun就是从阿里icon上面复制下来的代码

整体demo如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo</title><link rel="stylesheet" href="/t/font_2177230_n9jezy7z4kq.css"></head><body><i class="iconfont icon-changqun" ></i></body></html>

在页面中就有了我们无色的长裙

以上!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。