在uni-app小程序项目中使用字体图标和在普通web项目中使用字体图标区别不是特别大,唯一需要注意的点就是在字体文件的选择上,如果是web项目需要引入除ttf外的其它字体文件以保证兼容性; 维护比普通图片要稍微麻烦一些,如果你使用了iconfont字体图标,你后面图标管理必须依赖iconfont的管理平台,如果要添加、修改或者删除图标,...
"iconfont":{ "text":"\ue7d3", "selectedColor":"#409EFF" }, "text":"组件" },{ "pagePath":"pages/user/user", "iconfont":{ "text":"\ue63e", "selectedColor":"#409EFF" }, "text":"我的" }] } 1、需要指定字体文件 "iconfontSrc":"static/iconfont/iconfont.ttf", 2、指定unicode...
uniapp引入字体图标 1.从https://www.iconfont.cn/上下载图标 2.下载后解压文件,复制下面的文件到项目静态目录下 3.修改iconfont.css,修改url的路径到自己项目文件夹下 4.打开下载解压的html文件 5.复制Font class下面的类名,如icon-smile 6.复制到代码中如下...
1.登录iconfont官网(没有账号请自行注册登录) 2.找到图标管理->我的项目->然后新建项目: 我的项目 新建项目 3.项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索想要的图标,然后添加到购物车(免费) 添加图标到购物车 购物车图标添加到项目 生成代码 Iconfont资源的使用 uni-app 本地路径图标字体支...
一、到阿里云(地址:https://www.iconfont.cn/)的iconfont矢量图标库搜索你想要的字体图标,添加到购物车。 二、点击添加至项目 三、随便取个名称,点击确定按钮。 四、然后把需要添加的项目文件下载到本地吧。 六、在Uni-app项目中的static目录下,新建一个fonts目录,用于存放字体图标的相关样式文件。
1、字体文件 < 40kb,uni-app会自动将其转化为base64格式。2、字体文件 ≥ 40kb,需要开发者自己转换,否则不生效。 3、字体图标的引用路径,推荐使用以“~@”开头的绝对路径。 @font-face{font-family:"宋体" ;src:url('~@/static/font/iconfont.css')} ...
在app的实际开发中涉及到,字体图标可使用比较多。一些小知识点,记录一下。 "pages": [ // pages数组中第一项表示应用启动页 { "path" : "pages/tabBar/main/main", "style" : { "navigationBarTitleText": "首页", "enablePullDownRefresh": true, "app-plus": { "bounce": "vertical", "...
本文主要讲述的是在使用uniapp中如何引入iconfont图标,以及两种常用的位置。 位置一:App下原生导航栏的按钮使用字体图标。 位置二:页面中的任意位置使用iconfont图标。 第一步:打开iconfont官网新建项目并添加自己所需要的图标 这里是iconfont的网址链接: iconfo
<view>爱心图标</view> <textclass="'iconfont font-public icon-xin"></text> 1. 2. 二、使用字体图标: 1、与上边类似,在static 文件夹下创建 iconfont.css,把下边代码复制 进去: @font-face{font-family:"iconfont"; src:url('https://at.alicdn.com/t/font_1529268_3djn3t6heh9.ttf') ...