uniapp中使用iconfont

1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:

情景1：使用灰色的字体图标 步骤1：下载iconfont 步骤2：解压后只需要将ifonfont.css这一个文件 ，单独的放在你的项目的static>fonts下的某个文件下 步骤3：找到你项目下这个iconfont.css，修改样式，将其他url全部删除，只保留base64的那个url 且这个url最后的逗号,也需要删除 删除前的css： 删除后的css： 步骤4：引入： 注意:src字段的url的括号内一定要使用单引号 ①引入位置：你可以直接在app.vue内引入；也可以在main.

更新： 　　根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfon...

uniapp中iconfont的使用

下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。

简单的使用iconfont图标

2、在小程序中使用需要下载成png格式保存到本地后，复制到sta​​​​​​​tic中，用iconpath调用即可。

uniapp本身是有icon组件的，但由于icon组件各端表现存在差异，所以我们可以通过使用iconfont的字体图标来弥补这些差异。 第一步：在iconfont官网搜索我们需要使用的图标并添加到购物车 第二步：点击购物车，将图标添加至项目 第三步：点击生成代码 第四步：下载至本地 第五步：将iconfont.css复制到项目static文件夹下，并将iconfont官网生成的代码复制到iconfont.css 第六步：页面引用iconfont.css 第七步：使用iconfont图标.

1、把这两个文件在项目的静态资源目录下。2、修改iconfont.css文件。3、最后在app.vue中引入。

前言 uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样； app端不支持在main.js引入的css样式，需要在style中引用； 微信小程序不支持本地的字体图标文件，需要换成网络路径； 为了一套样式多端适用，我们使用下面这种方式来实现 首先打开阿里巴巴矢量图官网 复制图中的代码，那个是网络路径； 在uni-app项目中，app.vue文件下，style中粘贴并修改成如下样式 /*每个页面公共css */ @font-face { font-family: 'icon

uniapp 中使用彩色的 iconfont1、在自己图标库项目中下载到本地：2、解压3、shift+右键打开powershell窗口执行一下代码npm install -g iconfont-tools4、在步骤2解压的文件中执行命令行 （shift+右键打开powershell窗口也行）iconfont-tools按一下操作5、目录会多了个iconfont-weapp文件...

1.挑选需要的iconfont图标 阿里iconfont开源库 2.添加购物车 不亏是做电商的，这里也像购物一样！ 可以多选几个方便后面的测试效果！ 3.下载代码 4.解压文件 5.导入项目 创建static/font目录，将iconfont.css、iconfont.ttf导入到static目录中 6.修改iconfont.css文件 源文件 这时候编译会不通过！会提示svg、truetype、woff…找不到！那就将这几个去掉！ 其他几个报错的文件是没有引进来，那是其他平台兼容问题的，移动端

7、使用代码，主要是引用iconfont icon-search样式，注意u-search的placeholder设置不了样式，所以重写样式处理。5、将包里的iconfont.css和iconfont.ttf文件分别放在以下目录，并在App.vue里引入iconfont.css。6、iconfont.css代码，注意src只保留.ttf后缀名代码，路径设置为iconfont.ttf文件放置路径。1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/)，选择需要的图标添加到购物车。