uni-app 引入本地iconfont的正确姿势以及阿里图标引入

1.引入本地iconfont

iconfont文件里面包含 iconfont.ttf、iconfont.css，将 iconfont.tt64文件转位 base64。
推荐转换工具地址：https://www.giftofspeed.com/base64-encoder/

然后打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置，并且设置代码如下：

@font-face {  font-family: "iconfont";  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');
}
.iconfont {  display: inline-block;
}

最后则再项目中App.vue中引入iconfont.css文件　　

<style>
@import "./font/iconfont.css";
</style>

2.引入阿里图标

@font-face {font-family: 'iconfont';  /* project id 876692 */src:url('http://at.alicdn.com/t/font_876692_b4c5ti59cpk.ttf') format('truetype');
}

　注意的是src使用加上http

转载于:https://www.cnblogs.com/lizhao123/p/10642033.html

uni-app 引入本地iconfont的正确姿势以及阿里图标引入相关推荐

Nuxt 项目引入外部Js的正确姿势，问题描述：打包构建之后引入的外部 js失效，构建之后的 .nuxt 文件夹下的js文件中，引入 js 的script标签凭空消失！
首先先说我遇到的问题描述: 我是用vue + nuxt项目,项目中使用了阿里播放器,于是我在vue页面中直接引入了阿里播放器的 css和js文件,然后运行没有任何问题:如下图所示: 但是! ...
iconfont图标_小程序使用 Iconfont 的正确姿势
前言现如今移动设备分辨率不胜枚举,传统的标量图标要分别导出 1 倍图.2 倍图.3 倍图等以适应高分辩率设备.这无疑大大增加了设计师和客户端开发的工作量.矢量图以其无损缩放的优点,在图标方面有着极大 ...
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
1.登录阿里图标官网 2.注册自己的账户,创建项目 3.加入自己使用的图标,加入购物车 4.选中项目 5.选中引入方式: 第一种.使用统一码 Unicode 第二种.使用class Font clas ...
Vue框架引入JS库的正确姿势
参考自:https://mp.weixin.qq.com/s?src=3&timestamp=1527154113&ver=1&signature=tWGeTa86gyK*RL ...
Android Studio引入.so文件的正确姿势以及调用.so 文件时报错has text relocations 解决
首先在src同级目录下创建libs目录讲需要的.so复制到这里效果如图然后在app级别的build.gradle配置lib路径,效果如果完整代码如下: apply plugin: 'com.and ...
iconfont 无法导入 svg_Figma绘制图标上传至iconfont的正确姿势
Figma中做好的图标,导出svg然后再上传到iconfont,经常会出现样式错误的情况: 这是因为figma的填充模式为"even-odd",iconfont识别不了这种格式.一 ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
html使用阿里图标库（iconfont）制作字体图标
话不多说,先看一下效果图: 一.通过阿里图标库生成iconfont.css 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2. ...

uni-app 引入本地iconfont的正确姿势以及阿里图标引入

uni-app 引入本地iconfont的正确姿势以及阿里图标引入相关推荐

最新文章

热门文章