觀點

互聯網+時代,說建站,談運營與網絡營銷

微信小程序中引用FontAwesome字體

時間:2021-07-14

微信小程序—使用font-awesome圖標庫

第一步:去官網下載font-awesome字體包
font-awesome官網


下載完是一個壓縮包,解壓之后是這個亞子



第二步:找到紅線圈出的ttf文件,并上傳到這個網址


操作如下


第三步:convert下載完成之后是一個壓縮包,解壓之后是這個亞子


找到stylesheet.css文件并打開


我雙擊之后默認是hbuilder打開的,無所謂,只要能粘貼復制里面的代碼就行
這就是我stylesheet.css里面的代碼


第四步:在微信小程序里新建一個stylesheet.wxss的文件,并粘貼stylesheet.css的代碼
效果就是這個樣子


第五步: 找到在font-awesome下載的文件里的font-awesome.css文件,并和第四步同樣的操作:在微信小程序里新建一個font-awesome.wxss的文件,并粘貼font-awesome.css的代碼
注意?。。?!粘貼是刪除@font-face?。?!也就是這一塊的樣式不用復制,其余都需要復制


效果如下:


第六步:在app.wxss里引入新建的兩個wxss文件


第七步:寫一個圖標試試看

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



ok生效了?

0
首頁
案例
關于
聯系
国产日韩欧美一区二区东京热