• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 小程序使用iconfont

    標簽: 原生小程序  小程序


    vue項目使用iconfont

    使用iconfont圖標樣式庫-CSDN


    一、小程序使用iconfont

    與普通前端項目一樣,在iconfont圖標庫官網中添加到購物車,再從購物車添加到自己創建的項目中。

    1. 找到創建的圖標庫

    在這里插入圖片描述

    2. 查看生成的樣式文件在線鏈接

    在這里插入圖片描述

    3. 復制在線鏈接,直接用瀏覽器打開

    在這里插入圖片描述

    在這里插入圖片描述

    4. 小程序中引入iconfont

    創建iconfont.wxss文件(自己命名,可放置根目錄下或創建個文件夾放置,看個人情況)

    把瀏覽器打開的css樣式內容全選復制到創建的空iconfont.wxss文件中

    5. 小程序使用iconfont

    在根樣式文件app.wxss中引入iconfont.wxss
    引入app.wxss中作為全局css

    /*相對路徑*/
    @import "iconfont.wxss"
    

    app.wxss,如果iconfont.wxss文件不再根目錄,需要寫相對路徑引入

    如:既引入color-ui又引入iconfont的項目app.wxss

    /**app.wxss**/
    @import "colorui/main.wxss";
    @import "colorui/icon.wxss";
    @import "colorui/iconfont.wxss";
    
    6. 頁面使用iconfont

    給小程序<text>標簽添加兩個樣式名iconfonticon-xxxx
    注意,一定不要漏了iconfont

    <view class="player-control">
      <text class="iconfont icon-shangyishou"></text></text>
      <text class="iconfont icon-xiayige"></text>
    </view>
    

    圖標名可以在iconfont網頁項目中查看
    也可以在我們復制過來的iconfont.wxss中查看,一般為拼音容易找到


    二、組件樣式隔離導致iconfont無效

    解決小程序樣式隔離的三種方法-博客


    三、在偽類選擇器中使用iconfont

    1、iconfont作為偽類圖標

    使用到css偽類選擇器絕對定位

    在這里插入圖片描述

    .yiwancheng::before{
        content: "\e70c";
        color: #409EFF;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 100rpx;
        z-index: 2;
    }
    

    content屬性從iconfont.wxss中找到相應的圖標復制過來
    通過font-size,color控制圖標大小顏色絕對定位控制位置

    <image class="iconfont yiwancheng" />
    

    注意:偽類使用也一定要在html中寫上iconfont

    p.s 圖片作為偽類圖標

    在這里插入圖片描述
    圖片不能像iconfont一樣寫在content屬性里(iconfont本質是圖標轉文字,因此是文字)
    而圖片作偽類控制大小需要特殊操作,且
    在這里插入圖片描述

    2、iconfont作圖片缺省圖

    在這里插入圖片描述

    .swiper-image::before {
        content: "施 工 中 ...";
        color: #999;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translateX(-40rpx);
        text-align: center;
    }
    

    居中問題待解決
    這里以文字示范,iconfont同理即可
    因為沒有設定z-index,因此,當沒有圖片src時,會顯示偽類中的內容


    萬事不順,查文檔
    iconfont官網
    偽元素選擇器-w3c文檔
    圖片作為偽類圖標

    如有建議和疑問可聯系
    QQ:1017386624
    郵箱:[email protected]

    版權聲明:本文為kingAn123原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/kingAn123/article/details/106459866

    智能推薦

    小程序使用阿里巴巴圖標iconfont

    小程序開發 圖標使用 微信小程序開發,如果想使用像web端那樣的字體圖標,也是可以的,但是也只是支持Unicode,不支持彩色圖標,在網上也查了很多,其實也有很多都相似,這里大概也就三種方法可以供參考, base64位 這個我并不知道是什么,但是好像只需要轉換下就可以了,也還是很簡單的, 下載好所需的文件,例如iconfont的字體圖標 下載好的代碼里面的代碼格式如下 3.在這個平臺https:/...

    微信小程序中阿里iconfont使用記錄

    在弄小程序的時候,想應用幾個小圖標 又嫌都以圖片形式放上去麻煩 就找了找有沒有合適的icon 從而發現了新天地——阿里爸爸的iconfont https://www.iconfont.cn 接下來簡單記錄一下我的使用和踩坑過程 PNG 首先是下了幾個png圖片,用來做底部tabBar iconfont 可以直接將想要的圖標加入庫然后下載,令我感到很棒的是可以自定義顏色下載。...

    在小程序框架 wepy 中使用 iconfont 圖標字體

    新的小程序項目準備踩坑 Wepy 啦! 糾結過原生、Wepy、mpvue到底用哪個。 原生:之前的項目用的就是原生,開發起來有點太原始,想換換口味。把原生作為托底方案,假如另外兩個遇到踩不過去的坑就轉用原生做。 wepy:star數量有16k,看了看官方文檔,感覺開發方式還不錯。畢竟算是騰訊親生兒子,感覺靠譜些。 mpvue:star數跟 wepy 不相上下,也是 16k,一套代碼多端通用很有吸引...

    數組刪除其中某個對象的方法

    數組刪除其中的對象或元素,在前端是比較常見的需求。 我現在比較常用的方法如下: 這種方法只適合刪除具有唯一標識的對象。 有沒有想要脫單的小伙伴,加入我們的脫單星球,認識更多優秀的小哥哥小姐姐 特此聲明,星球是免費的,但是創建星球的時候說是必須輸入金額,所以只能先私聊,我再加你免費加入!...

    圖床搭建以及圖床工具的使用

    為什么要用圖床和圖床工具? 比較下面三種md中的圖片url地址(均免費),你會使用哪一種? 選1?由于是本地路徑,文檔分享后給其他人打開后很可能顯示圖片加載失敗。 選2?雖然分享后可以顯示圖片,但能保證加載速度? 選3?我肯定選這種,即兼容2的瀏覽器訪問,又能保證訪問速度。 這樣就可以回答上面的問題了!保證瀏覽器訪問要用圖床,保證加載速度要用圖床工具,又不花錢想想就開心。 除此之外本篇博客還會講解...

    猜你喜歡

    并發編程理論篇

    一、必備知識回顧 計算機又叫電腦,即通電的大腦,發明計算機是為了讓他通電之后能夠像人一樣去工作,并且它比人的工作效率更高,因為可以24小時不間斷 計算機五大組成部分 控制器 運算器 存儲器 輸入設備 輸出設備 計算機的核心真正干活的是CPU(控制器+運算器=中央處理器) 程序要想被計算機運行,它的代碼必須要先由硬盤讀到內存,之后cpu取指再執行 并發 看起來像同時運行的就可以稱之為并發 并行 真正...

    Java LinkedHashMap

    Java LinkedHashMap 前言 Map是我們在實際使用過程中常用的集合,HashMap在Java的實際開發中出鏡率很高,它通過hash算法實現了高效的非線程安全的集合,它有一個缺點就是,用戶插入集合的數據時無序,在我們需要一些有序的map的時候,我們就需要引入另外一個集合:LinkedHashMap。 LinkedHashMap是一個有序的非線程安全的集合,它是HashMap的子類,基...

    Spark Streaming處理文件(本地文件以及hdfs上面的文件)

    標題介紹文件流之前先介紹一下Dstream 下面是來自官網一段的說明,Discretized Streams或DStream是Spark Streaming提供的基本抽象。它表示連續的數據流,可以是從源接收的輸入數據流,也可以是通過轉換輸入流生成的已處理數據流。在內部,DStream由一系列連續的RDD表示,這是Spark對不可變的分布式數據集的抽象(有關更多詳細信息,請參見Spark編程指南)。...

    《痞子衡嵌入式半月刊》 第 8 期

    痞子衡嵌入式半月刊: 第 8 期 這里分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農歷年分二十四節氣,希望在每個交節之日準時發布一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 :《痞子衡嵌入式半月刊: 第 7 期》 嘮兩句 今天是小滿,小滿節氣意味著進入了大幅降水的雨季。痞子...

    (C++)二叉樹的線索化 / 線索二叉樹

    好久不見,朋友們!雖然我知道沒人看我的博客,但我還是想叨逼叨一下。啊,好久沒編程了(其實也就一周沒編),但你們知道,程序員一天不編程那能叫程序員么???雖然我不是程序員哈哈哈哈哈,但還是要有基本素養嘛。 繼續寫二叉樹,給自己立一個flag,就是這幾天要寫完之前沒做完的幾道題,和二叉樹紅黑樹各種樹之類的~~雖然有這個flag,但我還是很實誠地遵從自己的內心,買了一張明天的電影票,等我回來告訴你們好不...

    精品国产乱码久久久久久蜜桃不卡