阿里巴巴图标

阿里巴巴官网:https://www.iconfont.cn/

1,搜索关键词,点击图标 -> 加入购物车 -> 添加到项目
2,两种方式

(1)选择 Font class 或者 Unicode ?
”点击复制代码 “ 加上 https: 到浏览器打开文件;
把文件内容复制到小程序项目中的 iconfont.css 文件中;
修改 @font-face 里面文件的链接改为网络资源,//at 前全部替换成 https: //at…

(2)如果网络资源不可用,就需要下载到本地
把 @font-face 里面的相关的几个文件上传到自己服务器;
把下载的 iconfont.css 文件复制到小程序项目中;
把 iconfont.css 文件 @font-face 里面文件的链接改为线上路径;

url('https://healthytool.hsfzxyh.com/xyh_images/SCNU-AMS/icon/iconfont.ttf?t=1679294379876') format('truetype');

查看在线链接
示例

@font-face {
  font-family: 'iconfont';  /* project id 3146718 */
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_3146718_izwzcvw57hr.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_3146718_izwzcvw57hr.woff') format('woff'),
  url('https://at.alicdn.com/t/font_3146718_izwzcvw57hr.ttf') format('truetype'),
  url('#iconfont') format('svg');
}
3,可以全局应用(在app.vue中style中添加引用),也可以局部引用(指定.vue中的style中添加引用)

app.vue 中引入


4,使用(图标可以通过text view button等组件引用)


问题一 如果安卓手机显示不了图标,苹果手机可以显示,可以把图标转成base64

具体操作:
1.打开‘我的项目’
2.修改unicode为base64
(1)打开项目设置
(2)在字体格式选项勾选‘TTF’和‘base64’就可以了
(3)点击更新代码,就可以在光放页面把原先的TTF改为base64了(如下图)
3.复制最新的在线代码 替换原本的就行

阿里巴巴图标_第1张图片

你可能感兴趣的:(小程序,微信小程序)