html - 即使在使用显示 :inline-block 后，社交媒体图标也不会出现在一行中

Question

我有一个 WordPress 网站 https://dmarketer.com/我想在一行中显示社交图标，但即使在使用之后它们也会垂直显示:

display:inline-block;

.social {
       margin-bottom: 20px;
    }

    .social h4 {
       margin-top: 25px;
       font-size: 15px;
    }

    .social a i {
      padding: 0px !important;
      background: transparent !important;
      font-size: 46px !important;
      margin-left: 5px;
      margin-right: 5px;
    }

    .fa-facebook-square {
      color: #4267b2;
    }

    .fa-facebook-square:hover {
      color: #365899;
    }

    .fa-twitter-square {
      color: #1da1f2;
    }

    .fa-twitter-square:hover {
      color: #1da1da;
    }

    .fa-linkedin-square {
      color: #0084bf;
    }

    .fa-linkedin-square:hover {
       color: #0073b1;
    }

    .fa-instagram {
      color: #d9317a;
    }

    .fa-instagram:hover {
      color: #bc318f;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social">
        <h4>Connect with me on below social channels:</h4>
        <a href="https://www.facebook.com/RealMahadev/" target="_blank" itemprop="SameAs">
    <i class="fa fa-facebook-square fb"></i>
    </a>
        <a href="https://twitter.com/realmahadev" target="_blank" itemprop="SameAs">
    <i class="fa fa-twitter-square"></i>
    </a>
        <a href="https://www.linkedin.com/in/realmahadev" target="_blank" itemprop="SameAs">
    <i class="fa fa-linkedin-square"></i>
    </a>
        <a href="https://www.instagram.com/realmahadev/" target="_blank" itemprop="SameAs">
    <i class="fa fa-instagram instagram"></i>
    </a>
    </div>

我正在使用 Font-Awsome 图标。

Answer 1

您必须删除 <br>包含图标的链接之间的标签。