使用图标库

一使用BootCDN图标库

1.在线使用图标库

官网打开https://www.bootcdn.cn/,然后在搜索库中搜索font

选择第一个font-awesome
尽量选择版本高的
选择一个复制link

在网站https://fontawesome.dashgame.com/选择自己需要的图标复制标签,例如fa-adjust

需要修改的只有圈住的地方

2.在本地使用图标

本地使用时,需要把下载好的图标库移动到项目目标文件内,其他步骤同在线操作一样

使用URL地址引入

二.使用阿里巴巴矢量图标库

1.在线使用图标库

打开网址https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

登录以后,在图标库里面选择自己需要的图标

加入购物车
添加到项目
在Unicode中复制代码段到项目中

@font-face { font-family: 'iconfont'; /* project id 2089804 */ src: url('//at.alicdn.com/t/font_2089804_6xh442fknc4.eot'); src: url('//at.alicdn.com/t/font_2089804_6xh442fknc4.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.woff2') format('woff2'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.woff') format('woff'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.ttf') format('truetype'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.svg#iconfont') format('svg'); }

在帮助-代码应用-unicode引用中复制这段代码到项目

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

选择自己需要的图标代码,复制代码
第一段代码复制到项目中需要在地址栏加https: 在i标签中记得使用class命名iconfont

2.在本地使用图标

复制代码段到项目中,前面加上https: 然后复制图标代码到代码段

//at.alicdn.com/t/font_2089804_6xh442fknc4.css

以上方法都可以添加图标到项目,选择一种即可。

  • List item
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值