根据FontAwesome使用指南，您可以这样设置图标的大小:
1. <fa-icon [icon]="['far', 'coffee']" [classes]="['toolbar-icon']" size="2x"></fa-icon>
2. <fa-icon [icon]="['far', 'coffee']" [classes]="['toolbar-icon']" transform="grow-8"></fa-icon>
上述方法适用于零部件视图模板.
我try 了以下CSS设置:
#main-toolbar {
background-color: rgb(165, 42, 42);
// ... othe entries
@media only screen and (min-width:480px){
fa-icon {
color: white;
padding: 0px 64px;
size: "lg";
// transform: "grow-8";
}
}
@media only screen and (max-width:680px){
fa-icon {
color: yellow;
padding: 0px 16px;
size: "sx";
// transform: "grow-2";
}
}
}// #main-toolbar
colored颜色 和填充会发生变化，因此CSS可以正常工作.然而，100和101都不起作用，被忽略.此外，即使没有媒体查询，也无法在CSS中设置图标的大小.
有没有办法通过CSS设置图标的大小？
我在Angular v14.0.4中使用了FontAwesome v6.1.1.