Vue3+ts develops WeChat applets----steps to use FontAwesome icons (applicable only to face icons)
Because I use vue3+ts, but for npm to import FontAwesome, it seems that it does not support small programs, so I used the way of importing files.
- Download the FontAwesome font, I use version 5. [Official website]; because I downloaded the v5.7.2pro version, all decompressed files look like this (https://fontawesome.com/download)
- Open the css file, which needs to be used later in all.css; and open the webfonts file, and see the tff file in the red box below that needs to be converted accordingly:
- tff conversion process: Open the URL , click the red box button as shown below to select the tff file above; select from the basket; click the orange box to convert after completion; finally download the file.
- After the above preparations are ready, start to introduce them in the files in the project:
1) Put the above prepared all.css and the transformed ones into the static file of the stylesheet.css file project 2) Create a new one in the static file Fonts folder, put the converted tff file into the red box 3) stylesheet.css needs to be modified, (change font name, update path, etc.) as shown in the picture below: 4) Global reference in 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. Add it on the page that needs to be applied
<text class="fa fa-briefcase"></text>
