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,d09GMgABAAAAAAwwAAsAAAAAFfAAAAviAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCECgqdbJZ+ATYCJAMkCxQABCAFhG0HexulEUVGbuQg5SX7fyZkQ6b0hlGbOu2qyGhXBR7curl88fzOZjOsmrKMJVu8Pp9PMmKlLpyll2TX1JH4TcfTnP2893Y3m002a0kQ2wTRa0NKxYNYBY20DhXTUKWhgnhNjdYPvsCdcyLC0ZyWyHUkT80FZeXQA7rA/efygMlWY9cAAWiAf6b7hNbhzpFzG2sy6R6piZA1WeFx5o2sdVnP8v98+7k60Qge9ZDIWyjUeF9mcvPDPyaWyCRCXiLu8Bti+rpm6N4jCuK5tBcKTT6A3QECAA5CJUBpGYOcwAIFzITQYtrkicXAxlxAlYQhYG1MzqqUEZUDDSzegJsAYIv9ePQV2GMBMNAE2LJ5E9LHgaMdPu9BvB0KRmgPlCwPA0CPBEAAIAEA1bM25jqqwYwmEQS49hRMAgCZSP4mbod2qp1tD2zX7fXtVz/v0dFBeiA2FQKZzw9AgAEaEGgAH5N/HmKAmPXaOitWxQK0g0RAJhYKCBhYWCCgYQkEAgTLDCDQwFIPBBiWq8DAwvXAQ3slmrVkFRnAaADqcwD6PjB7n21gzxTWA6YCA+icU0qIWc/3DuDMAi+Jot4LEymtwPMB1khbf9EcapZ5iuF19BRP06wyiN1qhWJpjhqpPmJpe2ieUvSURqRZVhsryqInEC6fXSGcL1ZJJ42SWuQ1iLJ6PP6YkoOM6g5mQUq4cwvBuejJpVpVaZB10xK2rnv0aQsS1e1PVEy4C0uhffys2c3DfM63RK24yfNzV17mafGuxgbOtRVnobnf85SR371vFj35u32fJQ/+mLDy1pm/6yq2eArNQ5awrZ3L3c8vhmxbSFpMxpe6cRcBiH4Tj0z5ocSD2VhxN7bmZ4i3RzNN9nXBtz7PXTs/q/M2X1+zamyxq/B+eU6ue/8ZH20eqcfDdRgE3W1pNIRwGRkKwxgJoAbZs4OdhWb3eomO53yuoztwS8sYtcTZZsmBb8H36GutciNyH+1Oc7Nz5S3kuSf6H+1yV3QNxoekjJbNccMbaLc+7pg/RFx8RaVPCdYGQAw+rYzPhxJ9mCNE4aJMSyVJheGJxjHCe7lFKcowKUkPi6Ty/MXlkte+l95XnugQs2ua2E3t5XqZlRgg1AiUoWUWo5KI+d4R1e4howVkeGW9doXmoWW4tuhpgwFEoal4JljslFVrZoy0ueuePoTAylJjlHbCMMqXZTwmOhw6FWttJinm9n2pWTP0tbN0VwjXOERNgrAyG0Igjd8c/Xxah0euqPKdy2WvQq41EfLEZzfWwnc3SzgfYL/hb+GXGqQ0WRwKwB4rRbrX3K0ZYk51FhkeuiyvkdllwitxfUqoBWsrXLXR13hUcmaPx93f5dJjvsjz9HW6XIa1AhBsoASkm0LXcHMRu2JcCizLJbegd7XQaNgUPYkUnDOxNcCI8zFMTFSAUyelYBp0lqHG6hKMfXN1ivEFYrIyJxMsbW3pWQru4lF/Nj+Y296wc3vTTuK0Qb1Gm/xVz8E4o5yLGiwjJpQo218HDIOgeUSRD6QRy0XCLzNuW0UgwEKwZu/KGksRMsk6FyWWWDolzdUEIqTQQqRJVFGHfT4MNJKoGlKeUkkoQIaxZia+AfWkPeS1sM+YyyhZqELcbbOQFHNuk2IM9at3itOK0xtaa7PdWuEbj5y4o3PNH5lvNQfS1lKhzKAhExlfPZx2lc3GNeuGks7y14+Qyl0PfTF6eDBXugh1Js6J7xLSupEbjRAz87XxQue6YXG/C2xAD51b/2uvFtQeN6guEH7tm13xSkwc6LytW9GXGXVL/M2ds3a/m36xJcy8rSnpQbN1Z0v3s3ZC7t7bvh+PCXlnh1JrrVHXG9fBJqk2ah3sZvuqPx5jn5dxvbrWuk7Z+cFv3B6ppk/K+Zptejg+TspM7uWw+Wph7B4BDQxgFCZnypAzlL4Dix0988J7Jvese2z6pZXp2YhDHcClvgdu/RISrevXOQdNmoSUIZe4clBoyDUMgkV98I1g+ObDD78xCPQtQP+XwS+1E2ctlfrF/Lm7wUuBEn/8G+PXmzbUeaWA0h31k0Vktf7L/h0MvPgtv5+6tOa4JyLqpGnR4s0PuJfcxFlnZ018f+PwqYUFU/G3e+bRlHAYenRfOXW+7gc+8YugwP/usk925Bcj+R92gf2jgYldQ0u/PrYLnyHfv17sg2Ge2rye0WsrBy5INcTEPO+Ma58+SQ0gKfZ1w/hT43uM7z5eZ/zlprR2KB/s7u7u4eZMBeuYVfcOlpMtzJUzq4ePHNRrwcx+YRMyYwaXbjlStEryb+vc5s8vnbxczwQ90RRVQFGrrbXIsHTKMr2GhQ5Q3qQ844B7pjRNGJ7RLzc2cRkcDVlyZZS2TWn1jvK2Km2FI/zTznL/srZJ3k7jbkl8pUHGjeMlQyUpaHfGvIy55qLU3DQeOjV6g3I45nB0Q0zDX+GsLrlJFEdtMMaN0Xl0u49r0m7UNimt3EautYZrMuwaGb08zMtJtgxeAoPxjKqqGXgm9h4Fz4DBOUsd6vjQ6srQ8VO4XewubkrY+KrK8sH/cwWVPdmfgJq1zCJbtnHEfJSLi1auHI04xNXgIpQzbH6WUbSt03CfwdqXo5xHYHnXHGahfkFeTt4C/cKsUl0kfyGjo1E4cRK/BKbF2N6VV3ZDon4Sb3u5LHhZuU07UWsrt2d2Vu/MCZ7zgc0QWe9SIrXq8aExjkbSnRwxJqYX5+SnJ5qOGLsbj/RepD3CdmePamMkY2FIcjCLGMwv7LOQJ/7h9Xs53fzLEirmfVuuHbt/cHj64eBt5dfK7o4MSqa35VDpqBtOoWIiqQmHLWlMy7IOz4CUKtq+aESXwEmnTPAU3WLYT6bap9qKrR7WYIh16VL4Llq3aumSJUvtQ/A4ngtXpvwzRdl7Mw1MT3uL0Q52CKI1KEpdaYnA4xJr/NsS4/f0DlTNyea4mRbFbrX8L1LWjeqAIIzLJfGEwSkNII7FY0VZGiMXpiRh8cvUIXUezhKeGo69EkgRhYXWcIRFd0jnWEnBzFXpql8TtioOTDAWbXIOcz/W74FGI+ixBSNAsliKRWzB4xXLF9bV1bNSsjLu7ubEWlaIJqK6zn89zgekmqnklR8DOVB+OlKJ6gy8Kl/t5kjY2ysQRznMGV3Xw6yQjpLGFVrCRQnjDJnI12Tr9m/WWozzE4hDRERDOYiIwIHynIiwJh3woz5Eu7UJNchmIoNVab18HgAhUQwXVy/JKgIRkiyLmV06hgBSMS4qIhSererVDarnnGzHSOoabpcwwlZIiapd39I27a9d5l3SwY1WRpNDJrg4+fTd2H9a1zNp5ZrChZ+/ydF22seUag4y9RoovbUACui2vIN5bbRs25VmzfYJXYQX0voE1/D8t4rie1+EYv2E3hN4pdPn92aX7Nv4oRtcB7eNhwkfuGF899GTP+lSbkcLZvzQRWdf8OG3VcoUS0Z3df7RCRnJC45OFMenRpUmobREzw0eVHHqLv2l9e7VWZCSKgv9kj+JTHPTFXkC9D+weh1e8g8RNH7l4gLxxreR1yQ88RYpJw7JqnoAxIk7iOM24dZ+/3zzwdCHmWS00OcXdv8xPu1/peF7q1teIbCAi7IRwP8cos6NRP/qpzrm1lJjXo49F/YF1yJRi36AvBwDAMcnAfy75cneW67VVJv/O7WaQoBBAyGAAAsRYkqeAGjQQRJggIX+gIN4mWvrQDEHCCBKCwBx1noAgegkwGCAm4CA6BkEhLwN0GD2DWBAjAAOLvzouMm922h377GK2EJ9BmqMZsIbd67lC/JBVj6qs3Ef6AOVQJHmyZpn1OiXQQkjL2NkwLxR8OTtDaU0YL3psYlpF6M9ZRnLo6aNUZOdex6qRJ22BWpnTdIwNDZ1tEu9/wvEDaSKLxlwovkBeQEFDgqpvIb42axrDbgt7YMRV4oEMyC7e4YCnghGklcawObP1UONKNW1KLdOMjIRq2tO129Vl7V5cvENyi5hG0YEUYhGDNIgFmkRB4cZzZUJHdWEaxN8qBxVq1+kP9KraDnWSOsjvzNGEtctat5Tsm26wQ9iqAoNWjgnEwAA') 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的正确姿势以及阿里图标引入的更多相关文章

  1. Vue框架引入JS库的正确姿势

    参考自:https://mp.weixin.qq.com/s?src=3&timestamp=1527154113&ver=1&signature=tWGeTa86gyK*RL ...

  2. 必备技能六、Vue框架引入JS库的正确姿势

    在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...

  3. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  4. 开发函数计算的正确姿势 —— 使用 Fun Local 本地运行与调试

    前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算 ...

  5. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  6. Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)

    笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...

  7. Flutter Webview添加Cookie的正确姿势

    场景 h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条:按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一 ...

  8. Nodejs Express下引入本地文件的方法

    Express的结构如下: |---node_modules------用于安装本地模块.     |---public------------用于存放用户可以下载到的文件,比如图片.脚本文件.样式表 ...

  9. 程序员取悦女朋友的正确姿势---Tips(iOS美容篇)

    前言 女孩子都喜欢用美图工具进行图片美容,近来无事时,特意为某人写了个自定义图片滤镜生成器,安装到手机即可完成自定义滤镜渲染照片.app独一无二,虽简亦繁. JH定律:魔镜:最漂亮的女人是你老婆魔镜: ...

随机推荐

  1. Linux(Ubuntu)使用日记------trash-cli防止误删文件

    1.安装过程 cd /tmp git clone https://github.com/andreafrancia/trash-cli cd trash-cli sudo python setup.p ...

  2. 【MySQL 读书笔记】当我们在执行该查询语句的时候我们在干什么

    看了非常多 MySQL 相关的书籍和文章,没有看到过如此优秀的专栏.所以未来一段时间我会梳理读完该专栏的所学所得. 当我们在执行该查询语句的时候我们在干什么 mysql> select * fr ...

  3. Codeforces Round #522 (Div. 2, based on Technocup 2019 Elimination Round 3)B. Personalized Cup

    题意:把一长串字符串 排成矩形形式  使得行最小  同时每行不能相差大于等于两个字符 每行也不能大于20个字符 思路: 因为使得行最小 直接行从小到大枚举即可   每行不能相差大于等于两个字符相当于  ...

  4. python之文件的读写和文件目录以及文件夹的操作实现代码

    这篇文章主要介绍了python之文件的读写和文件目录以及文件夹的操作实现代码,需要的朋友可以参考下 为了安全起见,最好还是给打开的文件对象指定一个名字,这样在完成操作之后可以迅速关闭文件,防止一些无用 ...

  5. Day054--MySQL, 创建用户和授权, 数据类型, 枚举和集合, 约束,唯一, 主键,外键

    创建用户和授权 1.创建用户: # 指定ip:192.118.1.1的mjj用户登录 create user 'mjj'@'192.118.1.1' identified by '123'; # 指定 ...

  6. Java第五周学习总结

    学号 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 1.接口 (1)使用关键字interface来定义一个接口,接口分为接口声明和接口体,例如 interf ...

  7. mysql8.0.15二进制安装

    mysql8.0.15二进制安装 今天有幸尝试安装了社区版本的mysql8.0.15,记录下来,供以后方便使用.特此感谢知数堂的叶老师,提供了配置文件的模板. # 第一部分:系统配置 # 1.安装系统 ...

  8. zeppelin中连接hive和impala

    连接Hive 新建interpreter default.driver = org.apache.hive.jdbc.HiveDriver default.url = jdbc:hive2://hos ...

  9. Vue打包优化之分析工具webpack-bundle-analyzer

    // 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 con ...

  10. luogu 2157 状压dp

    f[i][j][k]分别代表1-i-1个人全部打完饭时i及其后7个人的状态为j时最后一个打饭的人为i+k的状态下所用的最小时间 当i已经打过饭时 即 j&1 那么 f [i] [j>&g ...