FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案
FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案
AlexTao
修改于 2023-05-16 13:17:56
修改于 2023-05-16 13:17:56
在给新站美化插入font图标的时候，总是和文字对不齐。尝试常规方法后不行那只能用最笨的方法来写。
实例如下:
css代码
font-size: 21px!important; /*字体强制大小*/
left:30%; /*偏离左侧30%位置显示*/
line-height: 1.42857!important; /*强制设置行高*/
position: absolute;具体适配需要结合自己调整
这样写虽然能把图标和文字随意对齐，不过会导致不同设备窗口下显示异常（因为值是写死的）。接下来说一下自适应， 真的是笨蛋的方法。因为写下来太繁琐了。首先要去新建一个css类，然后在fa图标类 class 最后引入这个类。在样式表里在分别写自适应设备的css。属实麻烦。（不过博主目前只会这一种写法，为了功能实现，勉强这样搞了）
自适应代码示例:
.denglukejian_zmki_wap {
font-size: 21px!important; /*字体强制大小*/
left:30%; /*偏离左侧30%位置显示*/
line-height: 1.42857!important; /*强制设置行高*/
position: absolute;
}
@media (max-width:768px) {
denglukejian_zmki_wap {
font-size: 21px!important;
left:9%;
line-height: 1.42857!important;
position: absolute;
}
}截图效果演示
css自适应相关文章（屡试不爽）
css适配屏幕尺寸大小自适应
改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样…
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录