新增自定義字型icon圖示
先提供一個比較好的自定義icon圖示庫阿里圖示庫
所以接下來的使用主要就是以從上面提供的網址下載的icon圖示為例(如果不會使用,請參考使用
下載完之後是一個壓縮包,解壓後,只需要根據我們的需要把相應的檔案放入我們的專案中即可
需要注意的是:我們一般會將我們下載的字型圖示放在我們自己建fonts資料夾中,把iconfont.css放在css資料夾中,如果你這樣做了,一定要記得修改iconfont中的路徑,比如,你的檔案是像下面這樣的
開啟你的iconfont.css,裡面的結構是:
@font-face {font-family: "iconfont"; src: url('../iconfont.eot?t=1529571163938'); /* IE9*/ src: url('../iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAA') format('woff'),//因為base64編碼太長,所以我刪減了一點,主要是看過程哈 url('../iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-dianying:before { content: "\e67d"; } .icon-kongbudianyinghulijing:before { content: "\e602"; } .icon-kongbudianyingxixiegui:before { content: "\e606"; } .icon-dianying1:before { content: "\e627";
那其實我們要修改的也只是
@font-face {font-family: "iconfont"; src: url('../iconfont.eot?t=1529571163938'); /* IE9*/ src: url('../iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAAAAFzAAAQA') format('woff'),//因為base64編碼太長,所以我刪減了一點,主要是看過程哈 url('../iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */ }
修改後為
@font-face {font-family: "iconfont"; src: url('../fonts/iconfont.eot?t=1529571163938'); /* IE9*/ src: url('../fonts/iconfont.eot?t=1529571163938#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA/YAAsAAAA') format('woff'),//因為base64編碼太長,所以我刪減了一點,主要是看過程 url('../fonts/iconfont.ttf?t=1529571163938') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../fonts/iconfont.svg?t=1529571163938#iconfont') format('svg'); /* iOS 4.1- */ }
修改完之後,就是怎麼使用了,它上面提供了三種使用方式:
第一種:unicode引用
unicode是字型在網頁端最原始的應用方式,特點是:
相容性最好,支援ie6+,及所有現代瀏覽器。
支援按字型的方式去動態調整圖示大小,顏色等等。
但是因為是字型,所以不支援多色。只能使用平臺裡單色的圖示,就算專案裡有多色圖示也會自動去色。
如果我們使用這種方式,我們只需要在我們的專案中匯入下面的這幾個檔案就可以了,其他的都可以不要
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
iconfont.css
並且其實我們是可以將iconfont.css中的下面部分刪除掉
.icon-dianying:before { content: "\e67d"; }
.icon-kongbudianyinghulijing:before { content: "\e602"; }
.icon-kongbudianyingxixiegui:before { content: "\e606"; }
.icon-dianying1:before { content: "\e627";
準備好之後就是使用了,首先需要引入iconfont.css檔案
<link rel="stylesheet" type="text/css" href="style/iconfont.css"/>
然後主要就是html程式碼了,看下面的簡單示例
<i class="icon iconfont"></i>
<div class="name">電影院</div>
css程式碼其實就是看你自己怎麼寫了,主要就是改變字型顏色了,大小了,行高等等,我就不再寫了
第二種:font-class引用
font-class是unicode使用方式的一種變種,主要是解決unicode書寫不直觀,語意不明確的問題。
與unicode使用方式相比,具有如下特點:
相容性良好,支援ie8+,及所有現代瀏覽器。
相比於unicode語意明確,書寫更直觀。可以很容易分辨這個icon是什麼。
因為使用class來定義圖示,所以當要替換圖示時,只需要修改class裡面的unicode引用。
不過因為本質上還是使用的字型,所以多色圖示還是不支援的。
使用方法和第一種很類似,只是iconfont.css中的內容就不要刪除了
使用方法:首先需要引入iconfont.css檔案
<link rel="stylesheet" type="text/css" href="style/iconfont.css"/>
使用示例如下:
<i class="icon iconfont icon-kongbudianyingxixiegui"></i>
<div class="name">恐怖電影</div>
和第一種的不同就是,用class類代替使用unicode了,這個類名一般都是語義化的,而且編譯器自己一般也會提醒,所以不用擔心
第三種:symbol引用
這是一種全新的使用方式,應該說這才是未來的主流,也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合,與另外兩種相比具有如下特點:
支援多色圖示了,不再受單色限制。
通過一些技巧,支援像字型那樣,通過font-size,color來調整樣式。
相容性較差,支援 ie9+,及現代瀏覽器。
瀏覽器渲染svg的效能一般,還不如png。
這個的使用方法就和上面的有所不同了,使用方法如下:
第一步:引入專案下面生成的symbol程式碼:注意使用這種方法,引入的不是iconfont.css,而是iconfont.js
<script src="./iconfont.js"></script>
第二步:加入通用css程式碼(引入一次就行):
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑選相應圖示並獲取類名,應用於頁面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
應用示例: <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianying1"></use>
</svg>
<div class="name">電影</div>
其實,從阿里的圖示庫中下載的檔案中,也有具體的使用,那幾個HTML就是說明,我是把內容提煉精簡一下,總結在一起相關推薦
新增自定義字型icon圖示
先提供一個比較好的自定義icon圖示庫阿里圖示庫所以接下來的使用主要就是以從上面提供的網址下載的icon圖示為例(如果不會使用,請參考使用下載完之後是一個壓縮包,解壓後,只需要根據我們的需要把相應的檔案放入我們的專案中即可需要注意的是:我們一般會將我們下載的字型圖示放在我們自
element-ui 的el-button元件中新增自定義顏色和圖示的實現方法
這篇文章主要介紹了element-ui 的el-button元件中新增自定義顏色和圖示的實現方法,目前的解決方案是:新增一個自定義全域性指令,同時在element-ui原始碼中,加入對應的元件。需要的朋友跟隨小編一起看看吧 我使用的element-ui的版本是V1.4.13。 如上圖所示,如果使用el
如何在瀏覽器位址列前新增自定義的小圖示?
如何在瀏覽器位址列前新增自定義的小圖示? 你是不是記得有時在瀏覽網易網站的首頁時,在地址WWW.163.COM前會顯示一個“易”字樣的小圖示。而預設情況下,這個圖示是一個IE瀏覽器的指定圖片。 其實這也不是什麼高深技術,只不過在網站目錄下添加了一個特定檔案而已。
ios 新增自定義字型
1.下載ttf字型。(到我的資源庫那可以下載字型) 2.新增字型到工程 3.在plist新增如下 4.檢查build phase裡有沒有新增進去 查詢所有字型程式碼,可放到viewdidload中 [cpp] view plaincopyp
[iOS] 新增自定義字型,並在storyboard/xib中使用
1.下載所需要的ttf檔案,匯入工程中,在Info.plist中新增一項:Fonts provided by application,填寫字型檔名稱加字尾.如圖: 2.雙擊字型ttf檔案安裝字型庫 3.在storyboard/xib中選擇字型 4.將text選擇回pl
react native 新增自定義字型
不可避免地,一款高顏值的App或多或少會使用自定義的字型,如何在React Native專案中新增自定義字型呢?答案還是相對簡單的,幾個命令列命令就能搞定 1.首先,確保字型格式是ttf格式的字型,並將自定義的字型整體存入專案資料夾中 比如新建個資料夾名為fonts放在根
react-native-vector-icons新增自定義字型
首先我們得保證自己已經添加了react-native-vector-icons這個庫,至於怎麼新增請自行檢視官方文件 react-native-vector-icons文件連結 react-native-vector-icons官方新增自定義字型一共有三種方
CSS3中用自定義字型實現小圖示icon
最近在做一個專案時, 研究了一下新浪微博的前端, 看到首頁中那個圖示了嗎, 以前看到這類效果的第一反應就是用一個gif之類的圖示做出來!! 但在研究的過程, 發現了一個小技巧, 注意那個em標籤中的文字是E, 但顯示出來一個類似ICON的圖示. 既然是HTML+CSS
知更鳥選單導航如何新增自定義個性圖示?
首先,我先讓大家看看添加個性圖示後的結果。 好了結果看了,現在開始教大家如何新增。 步驟1: 開啟後臺外掛選項,搜尋“Font Awesome 4 Menus”或可以到下面的百度網盤裡下載: 下載外掛連結:https://pan.baidu.com/share/init
css 使用@font-face 嵌入自定義字型或字型圖示方法筆記
通常css使用font-family指定客戶端顯示字型的樣式,本筆記目的在於解決客戶端未安裝指定字型,導致無法完成設計效果要求。與此同時現在大部分圖示使用字型格式,因為它有向量,體積小等等優點講解如何使用字型圖示 下面是詳細的方法步驟: 1、製作或下載字型檔案 由於瀏覽器對
easyui新增自定義圖示
最近用easyui發現圖示挺少的,其實可以另外新增一個css樣式,不過我偷懶,直接在easyui的css裡面添加了。 下面是目錄: icon.css是easyui的預設樣式檔案,ext_icons
高德地圖新增自定義圖示
1.新增自定義圖示 aMap.addMarker(new MarkerOptions() .draggable(true) .title(jsonObject.getString("functionDetail")
(六十六)c#Winform自定義控制元件-圖示字型
前提 入行已經7,8年了,一直想做一套漂亮點的自定義控制元件,於是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 碼雲:https://gitee.com/kwwwvagaa/net_winform_custom_contr
Ralink RT5350:新增自定義GPIO應用程式
Ralink RT5350:新增自定義GPIO應用程式 1.編寫LED應用程式,並修改相關配置檔案 1.1 新建led目錄 1.2新建led.c 1.3 編寫led.c 1.4 新建led目錄下Makefile 1.5 修改led上層目錄下的Makefile 1.6 將IO口
ArcMap新增自定義工具異常 - No New Objects added
問題描述: ArcMap新增自定義工具經常會出現“No New Objects added”的異常提示 原因分析: 新增的 XX.tlb 檔案未正確註冊造成,可能原因有兩種: 1、許可權不夠導致新增失敗 2、tlb檔案編譯不正確 解決方案: 方法一、點選"ArcMap"程式圖
minigui:自定義字型檔案的安裝位置(install location for custom font)
我們的基於minigui的嵌入式系統專案中使用了True Type字型,原以以為只要把字型檔案應用程式所在路徑下的字型資料夾(res/font)下就可以了,但實際執行時報錯了: NEWGAL>PCXVFB: /usr/local/bin/gvfb 12695 miniStudi
Apollo新增自定義的環境
如果需要新增的環境不是Apollo預先定義的環境,請參照如下步驟操作: 假設需要新增的環境名稱叫sit 修改com.ctrip.framework.apollo.core.enums.Env類,在其中加入SIT列舉: public enum Env{ LOCAL, DEV, SI
009-Ambari二次開發之新增自定義元件Redis(二)
上一篇我們主要介紹了Ambari新增元件的答題流程並以REDIS為例說明了流程,本篇在上一篇的基礎上,進一步完善說明流程並介紹如何給元件新增metric 掃描二維碼,關注BearData,獲取最新文章 上篇中,我們已經制作出了redis的rpm包,並重新編譯了我們修改後的Ambar
008-Ambari二次開發之新增自定義元件Redis(一)
Ambari目前支援的元件有HDFS、YARN、HBase、Hive、Pig、ZooKeeper、Sqoop、Storm、Flume、Tez、Oozie、Falcon、Storm、Altas、Knox、Spark、Ranger、Mahout、Kerberos等,已經涵蓋了從大資料應用的
win10新增自定義右鍵選單
如果你想實現在檔案上點選右鍵,選擇右鍵快捷方式裡一個軟體來開啟它,但是右鍵選單裡沒有這個軟體的快捷方式(比如免安裝版的UltraEdit),如下是步驟 1、“windows鍵+R”開啟執行視窗,輸入regedit,然後點選“確定”開啟登錄檔(有的家庭版的系統沒有登錄檔許可權,先升級系統吧)