iconfont图标库的利用
[*]https://www.iconfont.cn/ -- 点击链接进入官网
[*]择自己需要的图标加购物车
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117220810888-53272087.png
[*]点击资源管理-》我的项目
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117220827237-324711961.png
[*]选择你需要的项目-》下载到本地
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117220859212-2073783172.png
[*]将下载的压缩包举行解压，解压后生成一个iconfont文件夹，将整个iconfont文件夹放在assets中 -- assets/iconfont
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117220917419-1537011179.png
[*]双击 demo_index.html 文件可以在浏览器打开。
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117220934777-323450457.png
[*]普通图标利用 和 有色图标利用
[*]普通图标
普通图标利用 --- 选择Font class 这一个。（不会就看利用步调）
代码如下：
// 1. 在mian.js中引入 iconfont.css
import '@/assets/iconfont/font_4747698_sfed2xgfhfc/iconfont.css'
// 2. 可以直接利用
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117221009585-61425389.png
[*]有色图标
有色图标利用 --- 选择Symbol 这一个。（不会就看利用步调） -- 注意这个是引入js!!!!!!!!!!!!!!!!!!!!
代码如下：
// 1. 在mian.js中引入 iconfont.js
import '@/assets/iconfont/font_4747698_sfed2xgfhfc/iconfont.js'
// 2. 可以直接利用
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117221048600-622910496.png
可以看一下这个利用步调这里： -- 这里的第一步 其实就是iconfont.js的引入；
-- 这里的第二部，其实是对这个有色图标的一个样式的设置，不加这个的话，有色图标一引入会非常的大，加上之后会变得和正常的一样小，看自己，加不加都无所谓
-- 这里的第三步， 是利用有色图标，如果你想利用他给你设置好的这个样式，也就是第二个步调的样式，你直接给标签加上这个类即可。
https://img2024.cnblogs.com/blog/2160873/202411/2160873-20241117221129327-437672342.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]