东莞企业做网站,泰安网站建设工作室,园林网站模板下载,外链代发排名目录
一、选择图标#xff0c;加入购物车
二、下载到本地
三、导入项目
四、修改字体引用路径
五、开始使用 这里以扩展iconfont图标为例
官网#xff1a;iconfont-阿里巴巴矢量图标库 一、选择图标#xff0c;加入购物车 二、下载到本地
直接点击下载素材#xff0…目录
一、选择图标加入购物车
二、下载到本地
三、导入项目
四、修改字体引用路径
五、开始使用 这里以扩展iconfont图标为例
官网iconfont-阿里巴巴矢量图标库 一、选择图标加入购物车 二、下载到本地
直接点击下载素材网站就会自动将我们加入购物车的图标一起打包下载到本地
解压之后的文件夹 三、导入项目
将iconfont.css、iconfont.ttf导入到uniapp项目中建议放到static目录下 笔者是在static目录下建了iconfont的文件夹专门存放iconfont相关资源的 四、修改字体引用路径
修改iconfont.css中字体的引用位置改为我们存放iconfont.ttf文件的位置
src: url(/static/iconfont/iconfont.ttf) format(truetype); 五、开始使用
在App.vue中引入iconfont.css样式文件注意要改为自己的存放路径 使用 custom-prefix 和 type 属性自定义图标
uni-icons custom-prefixiconfont typeicon-setting size30/uni-icons 六、注意事项
有时候我们上iconfont搜索图标时可能搜索的关键词是中午那么出现的图标都是中文命名的如下图那如果我们需要到这类图标在uniapp中又是怎么引用的呢 将图标加入到项目中然后点击编辑图标我们就可以看到图标的一些基本信息当然我们也可以在这个面板操作这个图标 图标名称也就是我们展示的图标名称但是不是uniapp中引用的图标名称曾经的我还天真的以为改这个名称然后在uniapp中引用同样的名称就可以了哈哈哈哈哈 右边红色框起来的部分才是uniapp中实际引用的icon名称如果是想改uniapp中引用icon图标名称一定是要改这里的
