[英]How to apply theme or customize Nebular icons?
I working on the Nebular theme.我正在研究星云主题。 I have to customize the icons like icon-font-size.我必须自定义图标字体大小等图标。 I found the documentation here .我在这里找到了文档。
<nb-icon icon="file-text-outline"></nb-icon>
My question is, How to change default values that are available here .我的问题是,如何更改此处可用的默认值。
I have tried我努力了
<nb-icon [options]={icon-font-size:'1.5rem'} icon="file-text-outline"></nb-icon>
But it is not working.但它不起作用。
I found out that the actual syntax for changing the correct parameters is:我发现更改正确参数的实际语法是:
<nb-icon [config]="{icon: 'file-text-outline', options: {'icon-font-size': '1.5rem'}}"></nb-icon>
However, the display of the icons is still being controlled through the SCSS ( \@nebular\theme\styles\core\theming\_install.scss
).但是,图标的显示仍然通过 SCSS ( \@nebular\theme\styles\core\theming\_install.scss
) 控制。 Therefor my suggestion would be to remove the bindings and change whatever you need through your components' SCSS.因此,我的建议是删除绑定并通过组件的 SCSS 更改您需要的任何内容。 Here are the corresponding selectors for each option
:以下是每个option
对应的选择器:
nb-icon {
font-size: 1.5rem;
line-height: 2;
width: 2em;
height: 2em;
color: #000000; //For unspecified status
svg {
vertical-align: bottom;
}
&.status-basic {
color: grey;
}
&.status-primary {
color: aqua;
}
&.status-info {
color: bisque;
}
&.status-success {
color: blueviolet;
}
&.status-warning {
color: chocolate;
}
&.status-danger {
color: darkgoldenrod;
}
&.status-control {
color: darkseagreen;
}
}
finally, it is worked for me.最后,它对我有用。
in component.scss file在component.scss文件中
nb-icon {
font-size: 2rem;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.