[英]Font Awesome icon alignment inside md-button
I'm trying to align font awesome icons inside a button so that they are centered in respect to text on a toolbar. 我试图在按钮内对齐字体真棒图标,使它们相对于工具栏上的文本居中。 I have the following markup;
我有以下标记;
<div ng-app="app">
<md-toolbar>
<div class="md-toolbar-tools" md-tall"">
<h2>
<span>Icons</span>
</h2>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-circle" class="fa"></md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon>
</md-button>
</div>
</md-toolbar>
</div>
Which produces the following layout; 产生以下布局;
fa-lg
on the second icon makes it look centred although I suspect it is still aligned to the top. 第二个图标上的
fa-lg
使它看起来居中,虽然我怀疑它仍然与顶部对齐。 I tried sticking layout-alignment="center center"
on the md-button
to no effect. 我尝试在
md-button
上粘贴layout-alignment="center center"
无效。
How can I control the alignment of font awesome icons inside md-buttons and, specifically how can I vertically center these within the toolbar? 如何控制md按钮内部字体真棒图标的对齐方式,具体如何在工具栏中垂直居中? Is there a Angular Material way of doing this alignment, or is custom CSS required here?
是否有Angular Material方式进行此对齐,或者此处是否需要自定义CSS?
It appears to be the 24px fixed height on the md-icon
element that is messing with icon's vertical alignment. 它似乎是
md-icon
元素上的24px固定高度,它正在弄乱图标的垂直对齐。 The FontAwesome icon is designed with a dynamic height, so forcing a fixed height on the md-icon
element isn't compatible; FontAwesome图标设计为动态高度,因此强制
md-icon
元素上的固定高度不兼容; the middle of this element is no longer the middle of the icon. 这个元素的中间不再是图标的中间部分。 Try overriding this with
height: auto;
尝试用
height: auto;
覆盖它height: auto;
and it should work happily, eg: 它应该愉快地工作,例如:
md-icon {
height: auto;
}
The height added for md-icon is causing the issue 为md-icon添加的高度导致问题
md-icon {
height: 24px;
}
You need to add some extra class like follows 你需要添加一些额外的类 ,如下所示
<md-icon md-font-icon="fa-circle" class="fa **fa-md**"></md-icon>
and need to override the height 并需要覆盖高度
.fa-md {
height: auto;
}
Try this css 试试这个css
.md-icon-button .fa-circle {
font-size: 23px;
width: auto;
}
I have checked the latest release of Angular Material (1.1.1) and this problem has gone. 我检查了最新版本的Angular Material(1.1.1),这个问题已经消失了。 Enjoy!
请享用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.