vue3+ts开发微信小程序----使用FontAwesome图标的步骤(只适用于面性图标)

vue3+ts开发微信小程序----使用FontAwesome图标的步骤(只适用于面性图标)

因为用的vue3+ts 但是对于npm引进FontAwesome来说,好像对于小程序不支持,所以用了引入文件的方式。

  1. 下载FontAwesome字体,我用的是5版本的。[官方网址];因为我下载的是v5.7.2pro版本,所有解压后的文件是这样的(https://fontawesome.com/download)
    在这里插入图片描述
    在这里插入图片描述
  2. 打开css文件,里面的 all.css后面需要用到;还有打开webfonts的文件,看到了下面红框的tff文件 需要进行相应转换:
    在这里插入图片描述
    在这里插入图片描述
  3. tff转换流程:打开网址,如下图点击红框按钮选中上面的tff文件后;在根据篮框中进行选择;完成后点击橙色框进行转化;最后进行下载文件。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  4. 上面这些准备好后,开始在项目中的文件中进行引进:
    1) 把上面准备好的all.css和转化好中的放进stylesheet.css文件项目的static文件中
    2)在static文件中新建一个fonts文件夹,把转化好的tff文件画红框部分放进去
    3)stylesheet.css需要进行一些修改,(更换字体名称,更新路径等操作)如下图片:
    在这里插入图片描述
    4)在App.vue中进行全局引用
<style lang="scss">
// 阿里图标
@import './static/editor-icon.css';

.fa {
    
    
    font: normal normal normal 40rpx/1 FontAwesome;
}

@import './static/all.css';

@import './static/stylesheet.css';
@import './static/stylesheet1.css';
</style>

5.在需要应用的页面进行添加

<text class="fa fa-briefcase"></text>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/heavenz19/article/details/130368841
今日推荐