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
方法二 无需转码
修改路径如下
@font-face {font-family: "iconfont";
src: url('~@/static/iconfont/iconfont.eot?t=1583481355968'); /* IE9 */
src: url('~@/static/iconfont/iconfont.eot?t=1583481355968#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('~@/static/iconfont/iconfont.woff?t=1583481355968') format('woff'),
url('~@/static/iconfont/iconfont.ttf?t=1583481355968') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('~@/static/iconfont/iconfont.svg?t=1583481355968#iconfont') format('svg'); /* iOS 4.1- */
}
uni-app 引入本地iconfont的正确姿势以及阿里图标引入的更多相关文章
- Vue框架引入JS库的正确姿势
参考自:https://mp.weixin.qq.com/s?src=3×tamp=1527154113&ver=1&signature=tWGeTa86gyK*RL ...
- 必备技能六、Vue框架引入JS库的正确姿势
在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...
- 在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
- 开发函数计算的正确姿势 —— 使用 Fun Local 本地运行与调试
前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算 ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)
笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...
- Flutter Webview添加Cookie的正确姿势
场景 h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条:按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一 ...
- Nodejs Express下引入本地文件的方法
Express的结构如下: |---node_modules------用于安装本地模块. |---public------------用于存放用户可以下载到的文件,比如图片.脚本文件.样式表 ...
- 程序员取悦女朋友的正确姿势---Tips(iOS美容篇)
前言 女孩子都喜欢用美图工具进行图片美容,近来无事时,特意为某人写了个自定义图片滤镜生成器,安装到手机即可完成自定义滤镜渲染照片.app独一无二,虽简亦繁. JH定律:魔镜:最漂亮的女人是你老婆魔镜: ...
随机推荐
- Laravel——安装Laravel-admin
前言 环境 : WAMP | Windows 7 | PHP 7.0.4 | MySQL 5.7.11 | Apache 2.4.18 框架 : Laravel | Laravel-admin 文档 ...
- [CQOI2009] 中位数
不错的思维题 传送门:$>here<$ 题意:给出一个N的排列,求出其中有多少个连续子段的中位数是b 数据范围:$N \leq 100000$ $Solution$ 先考虑中位数的意义:一 ...
- python的排序方式
""" 冒泡排序: 冒泡排序的思想: 每次比较两个相邻的元素, 如果他们的顺序错误就把他们交换位置 比如有五个数: 12, 35, 99, 18, 76, 从大到小排序, ...
- 超越村后端开发(5:远程同步本地与服务器端的MySQL数据库)
1.同步MySQL数据库 服务器选用的华为云,安装了Ubuntu18.04,华为云默认是以root用户登录的. 1.使用Xshell6连接华为云 ls 2.Ubuntu18.04安装MySQL5.7 ...
- Java第一次实训作业
1.编写程序: 声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果. import java.util.Scanner; public class Hellowore { ...
- Nginx location 匹配规则详解
语法规则 location [=|~|~*|^~] /uri/ { … } 模式 含义 location = /uri = 表示精确匹配,只有完全匹配上才能生效 location ^~ /uri ^~ ...
- NPOI 图片在单元格等比缩放且居中显示
NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary> /// 图片在单元格等比缩放居中显示 ...
- 【强大的PDF格式转换工具】Lighten PDF Converter OCR for Mac 6.2.0
[简介] Lighten PDF Converter OCR 是一款Mac上强大的PDF格式转换工具,可以将PDF文档快速批量的转换为Office (Word, Excel, PowerPoint), ...
- 使用原生 python 造轮子搭建博客
这篇用来 记录一个 从零开始的 博客搭建,希望坚持下去,因为python 开发效率令人发指,所以会原生从零写 ORM ,Web 框架 前提是打好 异步 io 的基础, 使用异步,有一点要谨记,一旦开始 ...
- [Reinforcement Learning] Policy Gradient Methods
上一篇博文的内容整理了我们如何去近似价值函数或者是动作价值函数的方法: \[ V_{\theta}(s)\approx V^{\pi}(s) \\ Q_{\theta}(s)\approx Q^{\p ...