600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 阿里巴巴矢量图标库使用步骤

阿里巴巴矢量图标库使用步骤

时间:2020-05-13 05:23:07

相关推荐

阿里巴巴矢量图标库使用步骤

1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地。

2.解压文件。

3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/iconfont文件夹之下。

4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下,与iconfont文件夹在同一层。

5.至此,目录如下:

6.双击打开iconfont.css文件,修改引用文件路径,其他部分不做修改

7.在HTML文件中引入iconfont.css文件

8.在页面上面书写<span class="iconfont"><span>标签。

9.打开阿里巴巴矢量图标库,复制图标的代码

10.将复制所得的代码添加到span元素中。

至此结束。

小结:

也可以不在新建的CSS文件夹之下在新建iconfont文件夹,那么iconfont.css文件的引用路径也不必修改,不过这样操作的话,CSS文件夹之下看起来略乱。

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