1. 首頁
  2. 問答
  3. 在CSS中設置圖標的大小

在CSS中設置圖標的大小

2013-01-23 133 views
8

我正在使用JSF，並使用此代碼來顯示錯誤框。在CSS中設置圖標的大小

<div class="pnx-msg pnx-msg-warning clearfix"> 
    <i class="pnx-msg-icon pnx-icon-msg-warning"/> 
</div>

<i class.../>部件導入警告圖標。它的默認大小是36像素，但我需要將其大小調整爲24像素。我該怎麼做呢？

謝謝！

來源

2013-01-23 Nacho321

+0

你有沒有試過'''（或者''width'）？ –

回答

8

您可以覆蓋框架CSS（我猜你正在使用一個），並設置大小，只要你想，像這樣的：「重要的」

.pnx-msg-icon pnx-icon-msg-warning { 
    width: 24px !important; 
    height: 24px !important; 
}

酒店將確保您的代碼具有優先權到框架的代碼。 確保你覆蓋了正確的屬性，我不知道框架是如何工作的，這只是一個重要用法的例子。

來源

2013-01-23 15:03:31

+0

那麼，代碼看起來怎麼樣？我是否應該在標籤之間附上該段？ – Nacho321

+1

只需添加一個''部分Diogo爲您的JSF視圖文檔指定的內容（順便指出一個XHTML文檔） –

+0

好吧，它不適用於材質圖標 – msecilmis

24

您可以使用字體大小更改圖標的大小，而不是設置圖標的高度和寬度。下面是你如何做到這一點：

<i class="fa fa-minus-square-o" style="font-size: 0.73em;"></i>

有4種方式來指定圖標的尺寸。

PX：給予固定像素的圖標

EM：尺寸相對於當前的字體。說當前字體是12px，然後1.5em將是18px（12px + 6px）。

點：代表積分。主要用於印刷媒體

％：百分比。指基於原始大小的圖標大小。

來源

2014-04-02 11:50:46

4

更好的方法是使用'背景大小'。

.pnx-msg-icon .pnx-icon-msg-warning{ 
background-image: url("../pics/edit.png"); 
background-repeat: no-repeat; 
background-size: 10px; 
width: 10px; 
height: 10px; 
cursor: pointer; 
}

即使您的圖標尺寸大於10px，它將是10px。

來源

2014-11-24 08:46:28 moslem

相關問題

 相關問題