Как изменить размер значка бренда VMware Clarity Design System

Я играю с пользовательским интерфейсом системы проектирования VMware Clarity (https://vmware.github.io/clarity/) и запускаю их посевное приложение. Я пытаюсь заменить значок их бренда своим, но он другого размера. Я замечаю, что значок жестко запрограммирован на 36 x 36 пикселей. Если я попытаюсь установить новый размер в CSS, он все равно будет отображаться как 36 x 36 пикселей. Это жестко запрограммировано?

Размер логотипа


user-interface vmware vmware-clarity clarity
person codemonkey_42    schedule 23.01.2017    source источник
comment
Я вижу, это ваш первый вопрос о переполнении стека, добро пожаловать! Предоставьте код, чтобы мы могли увидеть, что вы пробовали, и лучше понять контекст вашего вопроса, который, в свою очередь, поможет нам помочь вам. Также см. Как задать вопрос о том, как задать лучший вопрос, который приведет к лучшим ответам.   -  person Raymond    schedule 23.01.2017
comment
Таким образом, исходный проект предоставляет следующий код: ‹div class = branding› ‹a href=# class=nav-link› ‹span class = clr-icon clr-dell-logo› ‹/span› ‹span class = title› Clarity ‹/Span› ‹/a› ‹/div› ..... Я изменил ‹span class = clr-icon clr-dell-logo› ‹/span› и добавил мой класс clr-dell-logo в CSS: .clr-icon {& .clr-четкость-логотип {background-image: url (../ images / Clearity_logo.svg); }} .clr-icon {& .clr-dell-logo {background-image: url (../ images / DellLogoWht.png); }}   -  person codemonkey_42    schedule 23.01.2017
comment
Также пробовал: .clr-icon {& .clr-dell-logo {background-image: url (../ images / DellLogoWht.png); размер фона: 400 пикселей 180 пикселей; }}   -  person codemonkey_42    schedule 23.01.2017
comment
@ codemonkey_42: Я считаю, что ваше правило CSS не применяется из-за его специфики. Вам нужно использовать .header .branding .clr-icon {height: xx, width: xx}, а затем изменить высоту и ширину, чтобы переопределить их установленный размер.   -  person takeradi    schedule 23.01.2017

Ответы (2)


arrow_upward
5
arrow_downward

Вот и все. Я думал, что мне нужно добавить размер к изображению, а не к классу .clr-icon. Это работает:

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

person codemonkey_42    schedule 23.01.2017

arrow_upward
3
arrow_downward

Ваш ответ верен, когда вы хотите установить размер с помощью css (я проголосовал за ваш, чтобы отразить это). Вы также можете установить размер значка с помощью атрибута size в элементе clr-icon:

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

У нас есть пример использования атрибута size здесь, Документация по значкам Clarity

Это примерно на полпути вниз по странице или выполните поиск по запросу Настройка размера значка. К вашему сведению - мы находимся в процессе обновления документации для Clarity Icons.

person hippeelee    schedule 02.08.2017