I can not get the icon on the right side of the screen, inside a div [closed]

By adminPosted on December 14, 2020

Question :

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

Answer :

Place the icon inside the paragraph.

Comments:

The <i> tag will be affected by the color defined in <p> , so I put color: initial in <i> , another option is to use <span> ;
I changed the color of the text to red, so we could 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>

You can put the <i> tag inside the <p> tag. As <i> has inline display it stays on the same line.

To move the rod to the right, just change its position to relative and add right: 0; so that it stays 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>

Use Bootstrap’s native% class ( documentation ). You will convert the d-inline tag to an inline element and the following element (in this case, the icon) will align next to it:

*{
   background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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>

Leave a Reply Cancel reply