I can’t put the icon on the right side of the screen, inside a div

Asked

Viewed 527 times

3

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>

<div class="row-md-12 container-fluid" id="rodape">
    <p style="color: white;padding-top: 7px;"> Siga-nos! </p>
    <i class="fab fa-facebook-square"></i>
</div>
html css

3 answers

1

Place the icon inside the paragraph.

Remarks:

  • The tag <i> shall be affected by the colour defined in <p>, so I put color: initial in the <i>, another alternative is to use <span>;
  • I changed the color of the text to red so we can see;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">


<div class="row-md-12 container-fluid" id="rodape">
  <p style="color: red;padding-top: 7px;"> 
    ícone a direita >  
    <i style="color:initial" class="fab fa-facebook-square"></i>
  </p>
</div>

<div class="row-md-12 container-fluid" id="rodape">
  <p style="padding-top:7px;"> 
    <i  class="fab fa-facebook-square"></i>
    <span style="color: red;"> < ícone a esquerda </span>
  </p>
</div>

0

You can tag it <i> within the tag <p>. Like <i> has inline display it stays in the same line.

To move the footer to the right just change its position to relative and add right: 0; so he’d stay right.

#rodape {
  text-align: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="row-md-12 container-fluid" id="rodape">
    <p style="color: black;padding-top: 7px;  "> 
    Siga-nos! <i class="fab fa-facebook-square"></i>
    </p>    
</div>

0

Use the class d-inline bootstrap native (documentation). Will convert the tag <p> in one element inline and the next element (in this case, the icon) will align right next to:

*{
   background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="row-md-12 container-fluid" id="rodape">
   <p class="d-inline" style="color: white;padding-top: 7px;"> Siga-nos! </p>
   <i class="fab fa-facebook-square"></i>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.