如何更改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设计系统品牌图标大小

回答

相关问题