1. 程式人生 > 其它 >uniapp引入字型圖示

uniapp引入字型圖示

技術標籤:uniAPP

一、在iconfont官網下載字型圖示:

選擇第二個進行下載,不然會導致手機端無法顯示
在這裡插入圖片描述

二、下載好的文件解壓好後,放入static中:

在這裡插入圖片描述

三、開啟font資料夾,複製iconfont.css,改個名字如下(在此我改的名字是icon.css):

在這裡插入圖片描述

四、打開復制好的icon.css,只保留含有base64的那個url

在這裡插入圖片描述

五、在App.vue中引入程式碼如下:

<style>
	/*每個頁面公共css */
	@import url("./static/font/icon.css");
</style>

六、在vue檔案中使用即可,如圖:

在這裡插入圖片描述