阿裡巴巴矢量圖標庫的使用

来源:https://www.cnblogs.com/2979100039-qq-con/archive/2020/07/13/13295488.html
-Advertisement-
Play Games

在參考小米官網寫頁面你時,會發現小米中有很多的矢量圖標,小米的圖標或許是自己的,但是我們寫頁面時要用到矢量圖標時怎麼辦,可以使用阿裡提供的圖標庫 阿裡矢量圖標庫網址:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 註冊一 ...


在參考小米官網寫頁面時,會發現小米中有很多的矢量圖標,小米的圖標或許是自己的,但是我們寫頁面時要用到矢量圖標時怎麼辦,可以使用阿裡提供的圖標庫

阿裡矢量圖標庫網址:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a  註冊一個賬號就可以免費的使用了。

使用方法如下:

 

第二步

 

 

第三步

 

添加購物車

 

 代碼下載後會有一個如下的文件夾,複製到自己的項目中

 

 

 

 下麵簡單的使用一下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 第一步引入 iconfont.css -->
        <link rel="stylesheet" type="text/css" href="font_fupby3jjl5e/iconfont.css"/>
    </head>
    <body>
        <span class="iconfont icon-sousuokuang" style="color: #0086B3;"></span>  <!-- 第一種 -->
        <span class="icon iconfont">&#xe628;</span>  <!-- 第二種 -->
        <!-- 第三種我沒有使用過可以參考 demo_index.html 文件-->
    </body>
</html>

 

 矢量圖標就相當於文本一般,它可以使用文本的屬性比如修改顏色,改變字體大小,字體居中等屬性,所以在處理矢量圖標時比圖片更加的方便簡潔。

個人學習,內容簡略。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 新聞 讓分享菜單變更簡潔:Android 11 Beta 2將應用的多個分享選項合併 Android 11新功能Auto-Connect:無需再為自動連接Wi-Fi煩惱 原生滾動截屏功能將不會出現在 Android 11 最終版本中 谷歌正為用戶和開發者打造全新Android平板體驗 更多細節八月公 ...
  • 基本數據類型(7種) number 1,2,3...... string '你好', 'hello', "helleo" boolean false/ true null undefined symbol object arr/fuction 標識符 : 所有用戶自定義的名字叫做標識符 1.不能以數 ...
  • ------------------------------------------------------------------------------------------------------------------------------------------------------... ...
  • 一、正則表達式 1.基本概念(簡略) 三大作用:匹配,提取,替換 正則表達式的組成:普通字元和元字元 元字元 元字元描述 \d 匹配一個數字字元,等價於[0-9] \D 匹配一個非數字字元,等價於[^0-9] \w 匹配一個包括下劃線在內的任意單詞字元,等價於[A-Za-z0-9] \W 匹配任何非 ...
  • flex佈局 任何一個容器都可以指定為flex佈局 當父盒子設為flex佈局後,子元素的float、clear、vertical-align屬性將失效 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局 採用flex的元素,稱為Flex容器(flex container)簡稱”容器“。 它的所 ...
  • 前言 非同步更新是 Vue 核心實現之一,在整體流程中充當著 watcher 更新的調度者這一角色。大部分 watcher 更新都會經過它的處理,在適當時機讓更新有序的執行。而 nextTick 作為非同步更新的核心,也是需要學習的重點。 本文你能學習到: 非同步更新的作用 nextTick原理 非同步更新 ...
  • 選擇排序: 第一輪: 第0個與第1個比, 如果 第0個 > 第1個 那就交換位置,第0個再與第2個比...... 第二輪: 第1個與第2比, ...................直到排序完成 let arr = [5,4,3,2,1] for(let i = 0; i < arr.length - ...
  • 參考網站 https://visualgo.net/ 冒泡排序: 前後兩個數兩兩進行比較 前 < 後, 則後面一個繼續與下一個比較 前 > 後,則交換位置,再與下一個比較 第一輪比較完成可以確定最後一個數字的位置 再進行第二輪來確定倒數第二個的位置 直到排序完成 arr.length = 5 關於 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...