Search code examples
htmlcsstwitter-bootstrapfooter

footer font-awesome icon is not respoding on my bluefish coder

I've added a footer to a webprofile. On codepen everything worked, but when I put the same code on bluefish coder, the e-mail icon gets below the facebook and instagram icon.

I would like them to be aligned. One on the side of the other. The three of them. I have not put span or anything like that. I'm putting the specifications below.

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:[email protected]" 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>

I have finished everything and I'm stuck on this one could anyone help me please.

Also below goes my codepen which the footer is working, but not on my bluefish coder.

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

Solution

  • The reason your mail icon is sitting below the other icons is because you have a class on it and it's pulling in as display:block;. To fix this, simply remove this class class="btn btn-lg btn-block btn-social btn-email">. Also, get rid of the unnecessary carrot you have it's parsing it as text and is invalid 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:[email protected]"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        </a>
        
  
        </div>
      </div>
    </div>