1. 程式人生 > >關於微信小程式中圖示的引用(基於iconfont)

關於微信小程式中圖示的引用(基於iconfont)

步驟如下:

iconfont圖示程式碼下載

  1. 在該網站中尋找我們需要的圖示,加入購物車(注意是加入購物車哦。如圖)
    加入購物車
    【加入購物車】
    這裡寫圖片描述
    【檢視購物車,點選下載程式碼】
    下載後的檔案,解壓
    【下載後的檔案,解壓】
  2. 關注解壓檔案 【iconfont.ttf】和【iconfont.css】

建立微信小程式樣式表文件.wxss

  1. 取名為font.wxss
  2. 將【iconfont.css】檔案內容複製到我們的font.wxss檔案中
  3. 使用就和我們使用其他字型圖示一樣了。
    使用效果截圖
 <view class='iconfont icon-add-circle' style='color:red;font-size:23px'
>
</view>

一個紅色的加號就可以使用啦。
這裡寫圖片描述

相關推薦

關於程式圖示引用基於iconfont

步驟如下: iconfont圖示程式碼下載 在該網站中尋找我們需要的圖示,加入購物車(注意是加入購物車哦。如圖) 【加入購物車】 【檢視購物車,點選下載程式碼】 【下載後的檔案,解壓】 關注解壓檔案 【iconfont.ttf】和【

程式使用Echarts可非同步請求資料

在微信小程式中使用Echarts,主要分為以下幾步: 1.首先要下載ecomfe/echarts-for-weixin專案,下載後將ec-canvas資料夾複製到小程式專案中,假設放在根目錄下utils資料夾中。 2.在要實現echarts圖的頁面引入echarts.js檔案,例如要在i

程式——下拉重新整理分頁

1、先定義兩個變數:   // 分頁,載入 hasMoreData:true, globalPage:0,  2、函式處理:   3、與後臺互動:  1)、在獲取列表的方法裡面,將下面兩個引數以及其他所需

程式使用第三方庫第三方js問題

原文:https://blog.csdn.net/u012421719/article/details/56676801 比如很多人會有這樣的問題: 小程式怎樣引用第三方js呢?

程式學習筆記二持續更新---程式網路請求封裝

寫小程式的你是否已經厭倦了傳送網路請求的wx.request?接著看吧。。。 一、目錄結構 在專案同級目錄下utils資料夾裡新建一個fetch.js檔案,(名字看自己喜好) 二、直接上程式碼 // 定義網路請求API地址 const baseURL = 'h

程式學習筆記四持續更新---征服scroll-view下拉重新整理

貼圖 大概實現這種使用swiper做tab切換,資料頁面下拉重新整理的效果。 官方提供的scroll-view作為容器,如果在scroll-view使用onPullDownRefresh實現下拉重新整理,會存在頁面重新整理卡,並且重新整理會出現在tab之上,使

程式,全域性樣式總的樣式和區域性樣式頁面樣式的用法和區別。

首先,全域性樣式寫在app.wxss裡面, 當然,頁面樣式當然寫在各個頁面的樣式裡, 第二 ,呼叫全域性樣式需要在你寫的類後面或前面加上你全域性樣式定義的類,(樣式的類越排後面,優先順序越高!) 比如: 這是我定義的全域性樣式 然後我要在區域性樣式裡呼叫

007-01、程式---元件之swipertab切換

此tab切換以登入頁面為參照。 1、WXMl <view class="tab-title"> <block wx:for="{{msg}}" wx:key="myke

程式學習筆記五持續更新---上傳檔案

專案中需要使用者上傳圖片,需要實現,上傳按鈕預設為一個,在上傳一張圖片之後,自動增加一個上傳按鈕,上傳三張圖片後按鈕消失。 實現思路: 1、圖片路徑儲存在一個數組中,增加和刪除圖片是對陣列進行操作; 2、僅一個按鈕,新增計數器,num=1;當num==3時,設定按鈕隱藏。 直接上程式

程式學習筆記三持續更新---程式元件通訊

參照這裡 這裡將重要的點貼一下: 一、專案目錄結構 在專案同級目錄新建components資料夾,新建component會生成wxml,wxss,js,json檔案。將所有的公共元件都寫在此資料夾下。 二、元件引入和使用 我們的所有頁面一般寫在pages目錄下,每個頁面有wx

前端開發----程式入門級教程前篇

前言 前段時間,憑藉著出生牛犢不怕虎的勁頭,憑藉著一點Java基礎和前端入門的知識水平,買了域名和伺服器準備搭建自己的一個技術站點,初衷是旨在打造自己成為一個T形全站工程師。後經過各種百度,各種折騰終於大概在半個月左右的時間寫好了幾個基本介面,能上傳圖片,釋出

程式圖片上傳開發例項

html部分 <!-- 圖片上傳 --> <view class='uploadimg'> <view class='uploadimgBox'> <block wx:for="{{imgs}}"

程式 request請求封裝包括登入

這段時間都在開發小程式。封裝是少不了的部分。經過三輪的修改修改再修改之後,得到了下面現在一直在用的這版。如果小夥伴你只需要封裝,不考慮需不需要重新登入的話可以把if(res.data.code ==5000)這段去掉。下面wxLogin也可以去掉了(強迫症,用不到的都喜歡去

程式 模板訊息 C#asp.net

傳送模板訊息,首先要獲得access_token。這個是連結 然後。。。。                     //傳送通知                                     JavaScriptSerializer Jss = new Java

程式-評教系統教師頁面

在teacher.wxml裡寫如下程式碼:<!--pages/teacher/teacher.wxml--> <view class='container'> <view class="header"> <text>評教系統-教

程式-預研總結PPT分享

該PPT適合產品、運營、設計、重構、開發同學瞭解探討。 備註: 第一:目前我們的團隊,從產品、設計、重構、開發都沒有很好的小程式專案經驗。 第二:接下來的產品規劃中,有多個產品比如WeGame APP以及運營活動都準備採用小程式的方式來做 第

程式初體驗筆記圖書館爬蟲

之前用PHP寫了一個爬蟲,結果圖書館不可以外網訪問,就暫停了,最近加深了一下JS,,發現微信小程式用得是JS開發的前端,用得樣式也是類似於CSS,可惜的是DOM不可以用了。看了兩天API,就上手寫了。主要是用到了input元件和button元件其他的就是正則爬蟲了。下面是de

程式教學第二章含視訊程式中級實戰教程之預備篇

開始前請把 ch2-3 分支中的 code/ 目錄匯入微信開發工具 上一節中,我們對 index.js 檔案中增加了 util 物件,並在物件中封裝了很多公用方法 let util = { log(){……}, ale

程式引入iconfont阿里巴巴向量圖示

1.訪問iconfont阿里巴巴向量圖示庫官網 2.搜尋自己想找的圖示(輸入拼音,中文或英文都可以) 3.把自己想找的圖示“新增入庫” 4.點選購物車,新增至專案(若無專案,可新建) 5.檢視線上連結 6.點選複製程式碼 7.在微信小

程式換行,空格多個空格寫法

在小程式中HTML的網頁實體無法正常使用,小程式中的寫法為:  一、空格,換行 <text>你好!\t七月流火啊!\n我在下一行</text> ---------------------------------------------------------