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定律:魔镜:最漂亮的女人是你老婆魔镜: ...
随机推荐
- react 入坑笔记(六) - 组件的生命周期
React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...
- Linux下一些简单常用命令的总结
Cent os常用命令 查看当前目录信息: l s a:显示所有包括隐藏文件 l :列表显示数据 h:显示数据大小 查看命令帮助: XXX --help[比如:l shel p] 清除控制台信息: c ...
- Sass和less的区别是什么?用哪个好
什么是Sass和Less? Sass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 ...
- Ubuntu 16.04 安装opencv3.4.5/cuda/caffe并使用jni笔记
因操作失误,误卸开发机NVIDIA显卡驱动,先更新操作日志如下: 1>NVIDIA驱动重装 1.卸载系统里的Nvidia残余 sudo apt-get purge nvidia* 2.把显卡驱动 ...
- Fedora 24系统基本命令
Fedora 24基本命令 一. DNF软件管理 1. 修改配置:在/etc/dnf/dnf.conf中加入fastestmirror=true.keepcache=true ...
- Python IDLE 代码高亮主题
Python IDLE 代码高亮主题 使用方法: 打开C盘我的 C:\Documents and Settings\你的用户名.idlerc文件夹 里面会有一个 config-highlight.cf ...
- 【THUSC2017】【LOJ2978】杜老师 高斯消元
题目大意 给你 \(l,r\),求从 \(l\) 到 \(r\) 这 \(r-l+1\) 个数中能选出多少个不同的子集,满足子集中所有的数的乘积是一个完全平方数. 对 \(998244353\) 取模 ...
- 思维导图读PMbok第6版 - 项目整合管理(21张全讲)
“ 3个月,800多页书,一大堆工作,复习时间不够呀?老师用思维导图解析PMP,思维导图解析PMP梳理PMbok第6版逻辑结构,帮你您全局掌握PMP知识,重点掌握PMbok难点.快速记忆PMP知识,思 ...
- unittest 框架-待优化
模块1 :getdata.py 读取测试用例test_case.xlsx,返回测试用例结果 import json from openpyxl import load_workbook class D ...
- re模块正则表达式
regular expression / regex / RE 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配.Python 自1.5版本起增加了re 模块,它提供 ...