FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案

在给新站美化插入font图标的时候,总是和文字对不齐。尝试常规方法后不行那只能用最笨的方法来写。

实例如下:

20200116-669f7a66b6e78

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;
}
}

截图效果演示

图片[2]-FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案-钻芒博客

css自适应相关文章(屡试不爽)
[b2_insert_post id=”5292″]

 

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共2条

请登录后发表评论

    • 头像NiCE0
      • Alextao的头像-钻芒博客赞助会员Alextao徽章-元老玩家-钻芒博客等级-LV6-钻芒博客作者0