Html 改变引导图示符中的字体大小图标在显示表布局中中断对齐

我想创建一个样式，其中一些正方形与使用引导图示符图标制作的箭头对齐。为了做到这一点，我创建了一些自定义样式，用于显示表格css代码

当我对glyphicon使用普通样式时，一切都正常，但当我尝试更改glyphicon的字体大小时，因为我希望它更大，glyphicon与设计的其余部分不一致，而是更高。我试着从顶部改变位置，文本位置等等，但都没用。有人能解决这个问题吗

下面是代码：（glyphicon没有真正显示，因为我没有包含适当的资源，但是设计还是被修改了）

.recipe{
边框样式：实心；
边框宽度：1px；
}
.小{
宽度：12px；
高度：12px；
}
1.大号{
宽度：32px；
高度：32px；
}
1.常用配方{
边框颜色：#5e5e；
}
.不寻常的食谱{
边框颜色：绿色；
}
1.珍稀菜谱{
边框颜色：蓝色；
}
.epic_配方{
边框颜色：紫色；
}
.common_bg{
背景色：#5e5e；
}
{
背景颜色：绿色；
}
.罕见的{
背景颜色：蓝色；
}
.epic_bg{
背景颜色：紫色；
}
.桌状{
显示：表格；
边界塌陷：分离；
边界间距：2px；
}
.表格行{
显示：表格行；
}
.表格单元格，.表格标题{
显示：表格单元格；
}
.桌头{
字体大小：粗体；
}
.字形图标大{
字体大小：30px；
}

正常尺寸，一切正常
改变字体大小后，箭头向上

属性应满足您的需要：

.recipe{
边框样式：实心；
边框宽度：1px；
}
.小{
宽度：12px；
高度：12px；
}
1.大号{
宽度：32px；
高度：32px；
}
1.常用配方{
边框颜色：#5e5e；
}
.不寻常的食谱{
边框颜色：绿色；
}
1.珍稀菜谱{
边框颜色：蓝色；
}
.epic_配方{
边框颜色：紫色；
}
.common_bg{
背景色：#5e5e；
}
{
背景颜色：绿色；
}
.罕见的{
背景颜色：蓝色；
}
.epic_bg{
背景颜色：紫色；
}
.桌状{
显示：表格；
边界塌陷：分离；
边界间距：2px；
}
.表格行{
显示：表格行；
}
.表格单元格，
.桌头{
显示：表格单元格；
}
.桌头{
字体大小：粗体；
}
.字形图标大{
字体大小：30px；
垂直对齐：顶部；
}

正常大小，一切正常
改变字体大小后，箭头向上

不知道为什么，但这里的代码似乎工作正常，当我将其放回原始页面时，代码又被破坏了。无论如何，我已经解决了将

垂直对齐

属性放入

表格单元格的问题。谢谢