uniapp中使用iconfont 图标库

我们要是想使用图标的话，快速的应用到我们的项目中

1.阿里矢量图标库作为一个前端开发人员还是要了解的

今天就说一下怎么快速应用到我的uni-app项目中

第一步选择图标点击我的项目没有账号的创建一个账号登陆下

搜索一个图标添加到购物车里面

添加到项目中

下载至本地

下载到本地解压打开把 iconfont.css里面的代码全部拷出来

把你的uniapp项目打开在App.vue文件中复制到全局样式中这样所有的页面都可以应用样式了 (有些涉及兼容性的代码可以删除掉)

@font-face {font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPAAAsAAAAAB+wAAAN0AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDLIMuATYCJAMQCwoABCAFhG0HRBscBxEVnLnIfh7YbpEPdK2kSz9N8bFDMJLec/DA55XvI2k2WcjtyXKmlI++DQryNBhx23lCC4SabG6G2vKFiXrJkthffvpS0rLDpWFF8MEx00UBDvNsNpeopm4ehU1HCTSNjK8g+Qd6Qf5h7MqLOA0B2KQrRdSt37QtFhpjkgDE0EEDemGlNOiaVIGFwCxZqRHLMbDkAnkHWOb/vvhI6SyQGArjrJb96/Wl5pvab/OVG3R1VS7ueCaArQMFlAIaxMBSS29U6C9FYSt/oykPLCwkvKn9xn2bHwxC3l4klvkvDxQSAcLESA4FoCwKKHhT2+bEUhfSIeFtPu8GTtIAWIAJLAI+DEXqOD0lIioqNSm0sNdCPyR4AoRFPoLrVU1e6IjchGhRgchT0aOTLTwHF+4HG5PcA44DadEhIRxm0X1T2l8LCL+/vdfb1udrtyhQpd0aZ9G6hHWbRgcCHXIsOdPv77N2rWed48Ad2gf87UPbrXFXL4xvv9aT0GHdoni32LZhi9od8eHztg1W67yz9vTpdXactpgeM8o/LfYydlVtvrDS0KGVFmzETMzERZsW4WZXdLt+PTwqNSoczaTCb/bl+83qV03O3HvIlSbx0GHpufXAXleW65E87NtPDDHO5vSPDdyQQ5YsGyIHy6XLxBBw+9Klg+UQuWQpI5K2f47/4rzwmD3WipqqTrvVi42ec+cOyHviJpw8OcFR7t0TI75+78SJPdbX7/UptnsenaafWGMyEoCguq6qA6g5qgaAGijf/NpR3M9L/9Ijoupvy7m2sgf9Lv737UFNe87/4SrcH8ltmaNVvqHVWhbYHG2epjoFgARsUw+/LwzRnoxhi0NsElicC0FSgjRQWOQiNbYUGDiUBROLGmBTUoP1DjFGoxA6BCg2B4Ag0jGQhHMNFJHuIjX2MRjE+wwmkZYGYv8uOyau3fjGqAQbqE/oNM3G0kscpL7RrqPiJN8n/ZFd54IizbOhF87IY8xxmy1FDBimCZ7gPBxHgoWpRy1pK7JUWWbKPinVNHmxG4YUgRqgdgIdjcyMW1rEuZ9/Q9ZqpHBNVoXxDzGnaxwUUnkL5Esyt8q6luc4G6skhAEMRibgCaLRaESqZCkf1kOaSLU9vItKZhYybSXp/LLpCdcBNuMjdKtpd/ivU60i36Fi3YZ7J23Davc8') format('woff2')
}

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.iconlove:before {
content: "\e643";
}

应用样式的时候前面先加上 iconfont 然后就是你选择的图标名字 iconlove 这样就可以

uniapp中使用iconfont 图标库相关推荐

如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
阿里巴巴图标库下载和使用，以及怎么在uni-app中导入使用图标库
目录一.==下载阿里巴巴矢量图文件== ==(1)阿里巴巴矢量图页面== ==(2)打开图标库== ==(3)添加到库中== ==(4)添加至项目== ==(5)项目设置== 随后保存成功之后生成代 ...
uni-app中使用自定义图标库
方法一: 1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 2.在项目根目录下创建common目录,并把iconfont.css文件放入common目录中 3.修改iconon ...
uniapp如何引入iconfont图标库
第一步: 你得拥有一个uniapp项目第二步点击iconfont官网在首页选好图标,在项目中新建一个css 将上面的1复制在css中,再点开下面这个链接再复制这个,在css中,下面就是css的 ...
uni-app 中使用iconfont图标
一.下载到本地桌面二.将这几个拖进项目三.根目录pages平级创建font文件夹四. 复制在线链接五.将iconfont.css中的最上面替换在线的六.在main.js中引入 import ...
WPF中iconfont图标库的使用
总目录文章目录总目录前言一.查找项目需要的图标二.图标的使用 1.作为字体使用 1.将项目图标,下载并解压缩 2.将ttf文件复制粘贴到自己的项目中 3.xaml中使用 4. 在代码中使用编 ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
VUE在线调用阿里Iconfont图标库
前言多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网 ...
前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...

uniapp中使用iconfont 图标库

uniapp中使用iconfont 图标库相关推荐

最新文章

热门文章