本地引入:
首先登录 iconfont 官网(https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2)
找到需要的字体图标,如果创建项目组的话,就在--我的项目--点击,下载至本地;
如果是直接加入购物车的话,就直接点击下载代码;
这两种方式都会下载一个 压缩文件,解压压缩文件之后,文件目录如下(其中我已经标注了两个文件名):
将上图中标注的 CSS 文件 复制到项目中的static目录下,也可以是其他路径下,只要引入的时候路径对就ok;
打开网址: https://www.giftofspeed.com/base64-encoder/ 网页内容如下:
点击 选择文件 将上上图中的 ttf 文件 引入,会生成 一大串 英文字母;然后复制;
打开在项目中引入的iconfont.css文件,找到 @font-face 部分,将该部分替换成
(注意:上面的图片有个地方需要改:将 woff2 改成 truetype )
并把 用红色矩形框圈起来的部分替换成 那会让你 复制的 一大串英文字母;然后保存;在 App.vue 文件中引入,就可以在全局中使用了;引入方式:
<style>
@import "./static/icon/iconfont.css";
</style>
在各个文件中的使用方式的话:有三种方式;方式都很简单;在下载的文件中 ,有一个叫 demo_index.html 的文件,打开该文件有详细介绍
在线引入:
将下载下来的iconfont.css文件中的 @font-face 部分改成一下内容;只不过url 中的地址需要改成你自己的 ttf 文件地址;
@font-face {
font-family: iconfont;
src: url('https://at.alicdn.com/t/font_874003_9rw87a8y04t.ttf')
format('truetype');
}
ttf 文件地址的话,通过iconfont项目中可以找到: 记得需要加上 https: ,要不然找不到地址;
使用方式和本地使用方式一样;
有什么不对的,还请大神指正;谢谢