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

截图效果演示

GIF

css自适应相关文章(屡试不爽)

%title插图%num
%title插图%num

css适配屏幕尺寸大小自适应

 

 

文章最后更新于 2021-07-09

给TA买糖
共{{data.count}}人
人已赞赏
WordPress优化前端

css适配屏幕尺寸大小自适应

2020-1-15 13:33:30

WordPress优化

WordPress 小工具移植 AD广告展示&关注我们 源自日主题RIPRO&Grace模块

2020-2-3 0:25:44

2 条回复 A文章作者 M管理员
  1. 请教 英文数字汉字符号同一行,在下一行是纯汉字,排版就会不好看,英文数字汉字符号同一行的结尾就会有空格,这个怎么搞呢,也不知道我的描述你看不看的懂 :mrgreen:

    • 看懂了但是没遇到过这种情况,是不是你本来的字体英文字符和汉字字符大小就不一样。你可以先换个字体试试或者排除css