在vue中如何使用字体图标(阿里巴巴)

1.选择需要的图标加入购物车。
2.打开购物车，添加至项目。
3.点击生成在线代码

4.点击下载至本地，放入需要文件夹下，可以放入assets下。
5.在style中引用

<style lang="less" scoped>
@import '../assets/font/iconfont.css';
@font-face {font-family: 'iconfont'; /* Project id 2845322 */src: url('//at.alicdn.com/t/font_2845322_xevu5vdk5nn.woff2?t=1632973283986')format('woff2'),url('//at.alicdn.com/t/font_2845322_xevu5vdk5nn.woff?t=1632973283986')format('woff'),url('//at.alicdn.com/t/font_2845322_xevu5vdk5nn.ttf?t=1632973283986')format('truetype');
}
</style>

①@import 引入字体样式。
② @font-face 刚刚生成的代码，复制到此处即可。
6.使用字体图标

        <i class="iconfont con"> </i>

 .con {font-size: 25px;margin-left: 40px;cursor: pointer;}.con:hover {color: #ccc;}

con可以改变字体图标的样式

在vue中如何使用字体图标(阿里巴巴)相关推荐

vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
在Vue中使用icon 字体图标
1.使用线上的阿里iconfont图标库 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
uni-app中使用扩展字体图标遇到的坑
uni支持使用字体图标,跟web使用方法一样.需iconfont.css文件中的引用方式在项目中存放位置在app.vue文件中全局引用字体图标 //在app.vue中引用方式 @import '. ...
vue中Mapbox的字体本地化部署解决方案
(1)Mapbox示例理解 <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
[react] 在React中怎么使用字体图标？
[react] 在React中怎么使用字体图标? 1.npm install --save react-fontawesome 2.npm install font-awesome 3.import ...
html+字体图标找不到字体,bootstrap中不显示字体图标问题怎么解决？
bootstrap中不显示字体图标的原因是什么?怎么解决?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 你在使用bootstrap字体图标的时候,是否遇 ...

在vue中如何使用字体图标(阿里巴巴)

在vue中如何使用字体图标(阿里巴巴)

在vue中如何使用字体图标(阿里巴巴)相关推荐

最新文章

热门文章