在vue项目中使用字体图标(精简易懂)(配图)
分类:
文章
•
2024-02-14 20:59:40
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM1MC8yMTZhZTUyOWI3YmYzZTExMzljZDY4YjRlYjQ3NDBkZS5wbmc=)
2.选择自己要用到的图标添加到购物车中
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzYxMS83M2U0ZGFlMWQ2YjM5MjM1MTlmZDE3NzA2NjliNmExYi5wbmc=)
3.随便创建一个项目
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkxLzcyNjM4MDE2YzFkOWU2ZDZlNjBiNWZkMjY4NDQ0ZjQzLnBuZw==)
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE4L2E2N2Y4ZGQ4MTZiZWMxYTk3MTE4YWY3ODYxYzY4YTIyLnBuZw==)
4.把购物车中的图标添加到项目中
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkxMS8wZjEzNjcyOTBmM2Q1ODgzYTUxZTAwMjc3ZmVkYWQ1Ny5wbmc=)
5.从项目中把图标下载到本地
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI3LzViNTQxZTFlMmQyMGZlZmE3NWNlYWRjMDhlZmJmNjhiLnBuZw==)
6.在项目中assets文件夹下创建一个iconfont文件夹
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQyLzBmM2Q2NjNhYjUzODhiNjQzMDgzZGYxNjA3ZWI1MmNhLnBuZw==)
7.解压开下载的文件,把解压出的文件中的iconfont.css和iconfont.ttf两个文件 拷贝到项目中的iconfont文件夹中
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzMxMC84OWRkOWUyOWE4NGIzYzg4NGIwZWE4NTliODliYTM1Ni5wbmc=)
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzEyMS8zNTNmOWIxNDY0MTk4NTNkMWEyM2FhNTQ2YWRiZmQ0OS5wbmc=)
8.把iconfont.css文件中的所有url都改成’./iconfont.ttf’
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkxLzU4NzZjMzIxOGQ0NGVkZjUzYzZjNGEyYWE1MGM5OTFiLnBuZw==)
9.在main.js中引入iconfont.css
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg1MS8yODRjYjM1ZTYwNDZkMzYyN2E4ZTdmNGE3ZjJkZTk5My5wbmc=)
10.在项目中使用例:
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI5LzlhMDMwYzVhNDA5ZTgwMmJmMzA1ZjViYmU0YjA2NGZkLnBuZw==)
11.iconfont类名是固定的,iconbaocun类名需要打开解压的文件中的demo_index.html,在打开的页面中点击Font class然后拷贝对应的类名即可
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE1NS85YWJiNzE1MzA3NTE1YTYzMzUwNjlmNzRmYzQwNDA5My5wbmc=)
![在vue项目中使用字体图标(精简易懂)(配图) 在vue项目中使用字体图标(精简易懂)(配图)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgxMy9hNWY0MjFjMGUyOGQ5NTNlZGZmNWRiMzYzNWJhOTYxNS5wbmc=)