做it软件的网站,公司部门新年祝福语简短,windows优化大师官方,定制网站开发一般多少钱微信小程序中 vant weapp 使用外部的icon作为图标的步骤 1. 在项目中创建静态资源文件夹2. 前往iconfont图标官网#xff0c;添加图标并拷贝在线链接3. 下载iconfont代码#xff0c;解压之后拷贝到小程序的目录中4. 修改iconfont.wxss 将本地链接替换为在线链接5. 在项目的ap… 微信小程序中 vant weapp 使用外部的icon作为图标的步骤 1. 在项目中创建静态资源文件夹2. 前往iconfont图标官网添加图标并拷贝在线链接3. 下载iconfont代码解压之后拷贝到小程序的目录中4. 修改iconfont.wxss 将本地链接替换为在线链接5. 在项目的app.wxss全局样式文件中引入iconfont.wxss样式6. 页面使用以van-icon为例7. 页面效果 1. 在项目中创建静态资源文件夹
首先在当前项目的根目录中创建assets文件夹用于存放静态资源assets里面的文件夹可以自己定义图片css… 2. 前往iconfont图标官网添加图标并拷贝在线链接
iconfont官网 https://www.iconfont.cn/
添加一个图标到iconfont项目中点击生成在线链接记得选unicode然后再生成在线链接待会儿会使用 3. 下载iconfont代码解压之后拷贝到小程序的目录中
接着将当前项目的代码下载下来 下载完毕之后将压缩包解压会得到类似下面的目录结构 将这些解压的资源全部拷贝到微信小程序的assets目录中并且将iconfont.css重命名为iconfont.wxss 因为微信小程序不识别.css 4. 修改iconfont.wxss 将本地链接替换为在线链接
然后对iconfont.wxss进行编辑修改将刚刚复制的在线链接替换掉本地的链接 5. 在项目的app.wxss全局样式文件中引入iconfont.wxss样式
在app.wxss中使用import 将wxss样式导入
/*用自己项目的路径啊这只是我的项目的路径*/
import ./assets/iconfont/iconfont.wxss; 6. 页面使用以van-icon为例
van-icon classiconfont class-prefixicon nameduihuazixun /class “iconfont” 代表的就是 iconfont 这个类class-prefix “icon” 代表的是 样式的前缀 为 iconname “duihuazixun” 表示的就是某个图标
可以打开iconfont的项目设置进行对比观察就一目了然了 tips :补充一句,使用其他标签引入icon时语法如下 text classiconfont icon-duihuazixun/text7. 页面效果
页面显示效果我这里为了方便截图将图标的尺寸调大了一些
