我的蓝鱼编码器上的页脚字体真棒图标没有响应

Posted 2023-03-21

【中文标题】我的蓝鱼编码器上的页脚字体真棒图标没有响应

【英文标题】：footer font-awesome icon is not respoding on my bluefish coder

【发布时间】：2018-02-27 06:22:07

【问题描述】：

我已在网络配置文件中添加了页脚。在 codepen 上一切正常，但是当我将相同的代码放在 bluefish coder 上时，电子邮件图标位于 facebook 和 instagram 图标下方。

我希望它们对齐。一个在另一个的一边。他们三个。我没有放跨度或类似的东西。我把规格放在下面。

p 
  display: inline-block;

<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- The font awesome icons I put -->

<div class="navbar navbar-inverse navbar-static-bottom">
  <div class="container">
    <div class="navbar-text pull-left">
      <p>© 2017 All Rights Reserved</p>
      <p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
    </div>
    <div class="navbar-text pull-right" style="display: inline-block;">
      <a href="https://www.facebook.com/marina.sanchez.125"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
      <a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
      <a href="mailto:[e-mail]" class="btn btn-lg btn-block btn-social btn-email"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>


    </div>
  </div>
</div>

我已经完成了所有事情，但我被困在这个问题上，谁能帮帮我。

下面还有我的代码笔，页脚正在工作，但不在我的蓝鱼编码器上。

https://codepen.io/JT_Cerqueira/full/WZbEdq/

【参考方案1】：

您的邮件图标位于其他图标下方的原因是因为您有一个课程并且它以display:block; 的形式出现。要解决此问题，只需删除此类 class="btn btn-lg btn-block btn-social btn-email">。此外，摆脱不必要的胡萝卜，它会将其解析为文本并且是无效的 html。

<!-- bootstrap version and the one I know how to work with -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>  

/*=============footer============*/
p 
  display: inline-block;


</style>	
  <!-- ======font awesome======= -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  

<!-- The font awesome icons I put -->

<div class="navbar navbar-inverse navbar-static-bottom">
		<div class="container">
        <div class="navbar-text pull-left">
          <p>© 2017 All Rights Reserved</p>
            <p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>  
        </div>
       <div class="navbar-text pull-right" style="display: inline-block;">
       <a href="https://www.facebook.com/marina.sanchez.125"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
      <a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
       <a href="mailto:[e-mail]"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>
        
  
        </div>
      </div>
    </div>
    

【讨论】：

非常感谢！我完全被困住了，这就像这个小项目的最后一部分。也感谢您的提示。我会做出必要的改变。

【参考方案2】：

<!-- bootstrap version and the one I know how to work with -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>  

/*=============footer============*/
p 
  display: inline-block;


</style>	
  <!-- ======font awesome======= -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  

<!-- The font awesome icons I put -->

<div class="navbar navbar-inverse navbar-static-bottom">
		<div class="container">
        <div class="navbar-text pull-left">
          <p>© 2017 All Rights Reserved</p>
            <p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>  
        </div>
       <div class="navbar-text pull-right" style="display: inline-block;">
       <a href="https://www.facebook.com/marina.sanchez.125"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
      <a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a> 
       <a href="mailto:[e-mail]"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>
        
  
        </div>
      </div>
    </div>

现在您可以运行 code sinppet 正确的结果。