700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > web项目如何使用Iconfont阿里图标库

web项目如何使用Iconfont阿里图标库

时间:2023-02-15 15:22:47

相关推荐

web项目如何使用Iconfont阿里图标库

web项目如何使用Iconfont阿里图标库

步骤一:进入Iconfont官网:

Iconfont阿里图标库官网:/

步骤二:点击顶部图标库,选择图标库并选择

步骤三:选择其中一个图标,并加入购物车

步骤四:点击顶部的购物车,展开购物车后,点击“添加至项目”

此时要登录,有GitHub的选择GitHub登录

登陆后,创建一个项目,把图标添加到项目中来,如创建项目demo

接着会跳转到你的项目页面来,

这里选择“Font class”,通过在页面中以class类名把图标引进来。

如图所示:我们看到图标时会发现,图标下有两个英文,上面是图标名称,下面是图标的class类名

方式一:通过下载本地文件方式(生产上推荐,开发测试上不推荐,不够灵活)

步骤五:将项目下载至本地

下载完成后打开文件,如图所示

注意iconfont.css文件,我们就是通过这个文件把图标引到页面中

步骤六:把iconfont.css复制到项目中去,并在页面中引入该css

方式二:通过引用在线链接的方式(开发测试上推荐)

步骤五:点击查看在线链接,复制该链接

步骤六:在项目中引入该链接:

可以对图标修改样式,如颜色,大小等

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