设计师为我们单独提供了设计稿中的图标,为了方便使用,我们在这里把它制作为字体图标。制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/。
一、注册账户
二、创建项目
三、上传图标到项目
可以在首页中挑选符合项目的图标加入购物车,或者是ui已经设计好的svg,导入项目:
四、生成链接
五、配置到项目中使用
在styles文件下创建icon.less,把复制过来的代码粘贴过来
@font-face { font-family: "toutiao"; /* Project id 3852472 */ src: url('//at.alicdn.com/t/c/font_3852472_bvqgbaxp2el.svg?t=1672913556576#toutiao') format('svg'); } .toutiao { font-family: "toutiao" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .toutiao-Icon_arrow-down:before { content: "\e602"; } .toutiao-a-Icon_arrow-right:before { content: "\e603"; } .toutiao-Icon_eyes:before { content: "\e604"; } .toutiao-Icon_profile:before { content: "\e605"; } .toutiao-a-Icon_fullscreen:before { content: "\e606"; }
在index.less(全局样式)中导入,注意全局样式必须引入main.js才会生效
@import "./icon.less";//less文件导入后面加相对路径!!
//main.js
// 导入全局样式
import '@/styles/index.less'
使用:在标签上加上class=toutiao toutiao-xxx",即可使用对应的图标,eg:
<i slot="icon" class="toutiao toutiao-Icon_arrow-down"></i>