如何更改VMware Clarity設計系統品牌圖標大小

我正在使用VMware Clarity設計系統UI（https://vmware.github.io/clarity/）並運行其種子應用程序。我試圖用自己的品牌來替換他們的品牌圖標，但尺寸不同。我注意到該圖標似乎被硬編碼爲36像素x 36像素。如果我嘗試在CSS中設置新大小，它仍呈現爲36像素x 36像素。這是硬編碼的嗎？如何更改VMware Clarity設計系統品牌圖標大小

LogoSize

來源

2017-01-23 codemonkey_42

我看到這是你的第一個問題堆棧溢出，歡迎！請提供一些代碼，以便我們可以看到您所嘗試的內容，並更好地瞭解問題的背景，這反過來會幫助我們幫助您。另請參閱[如何提問]（http://stackoverflow.com/help/how-to-ask）瞭解如何更好地提出問題，從而獲得更好的答案。 –

所以種子工程提供了以下代碼：

Clarity

..... 我改變了的並加入我的課CLR-戴爾標誌到CSS： .clr-icon {.dll-clear-logo { } background-image：url（../ images/clarity_logo.svg）; } } .clr-icon {.clr-dell-logo { } background-image：url（../ images/DellLogoWht.png）; } } –

也嘗試過： .clr-icon {.lrc -dell-logo { background-image：url background-size：400px 180px; } } –

就是這樣。我想我需要將大小添加到圖像，而不是.clr-icon類。這工作：

.header .branding .clr-icon { 
 
    height: 13px; 
 
    width: 73.9px; 
 
    &.clr-dell-logo { 
 
     background-image: url(../images/DellLogoWht.png); 
 
    } 
 
}

來源

2017-01-23 21:16:25

你的答案是正確的時候，你要設置的CSS大小（我上你投以反映）。您還可以設置圖標大小與CLR圖標元素的大小屬性：

<clr-icon shape="info" size="48"></clr-icon>

我們在這裏使用的尺寸屬性有一個例子，Clarity Icons Documentation

這是關於1/2向下翻頁或搜索設置圖標大小。僅供參考 - 我們正在更新清晰圖標的文檔。

來源

2017-08-02 14:26:14 hippeelee

如何更改VMware Clarity設計系統品牌圖標大小

回答

相關問題