在Materialise上将材质图标与文本对齐

问题描述

最近，我开始研究一个包含一些带有某些字段的表的项目，我想通过图标一侧的MaterialiseCSS添加一些Material Design Icons。查看图像，你可能会得到它

Recently, i started working on a project that contains a table with some fields, and I want to add some Material Design Icons trough MaterializeCSS on the side of the icons. Look at the image and you might get it

：

我试过一切，垂直对齐，内联（-block），flex，以及我在堆栈溢出中可以找到的一切。所以不，这不是重复，我真的需要帮助。
谢谢。

I tried everything, vertical align, inline(-block), flex, and everything I could find in stack overflow. So no, it's not a duplicate, I really need help.Thank you.

推荐答案

这是一个解决方案。当然这取决于图标，你必须找到符合图标高度的特定 font-size 。示例：

That's a solution. Of course it depends on the icon, you have to find the specific font-size that will fit the icon's height. Examples:

#txt1{
 font-size:28px;
 line-height:24px;
}
#txt2{
 font-size:36px;
 line-height:24px;
}
#txt3{
 font-size:21px;
 line-height:24px;
}
.material-icons{
    display: inline-flex;
    vertical-align: top;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>

这篇关于在Materialise上将材质图标与文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！