Icone does not appear as desired using Fontawesome

Asked

Viewed 29 times

1

I have a table with stock buttons but, as they are inside the tag the result is different than expected. OBS: I need you to direct to a new route. How to fix it. I want the result on the right side.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.3.1/css/all.css" rel="stylesheet"/>
<div class="container">           
  <table class="table table-white">
    <tbody>
      <tr>
        <td><a href="/deletar/{{dataValues.id}}"><button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></a></td>
        </a></td>
        
        <td><button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button></td>
      </tr>
      
    </tbody>
  </table>
</div>

html css node.js twitter-bootstrap

2 answers

0

I didn’t understand your doubt, a little more specific power?

see this example of the button being left or right only using the float-right and float-left class

<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>
<div class=container>
<button type="button" class="btn btn-danger float-right"><i class="far fa-trash-alt"></i></button>
</di>
<hr>
<div class=container>
<button type="button" class="btn btn-danger float-lrft"><i class="far fa-trash-alt"></i></button>
</di>

  • I’m using nodejs. When I click the button I want to go for a new route, but the buttons are ugly. Run the code, so you can see the difference in the buttons. The first boot works but is ugly, the second is cool but does not direct to the route I want.

  • Yes, it is because in one this using a link tag and in the other button only, you can use only so <button type="button" class="btn btn-Danger float-right"><i class="far fa-Trash-alt"></i></button> or even in your css adjust the property of a to it stay None a{text-Decoration: None;}

  • How to go to this route " /delete/{dataValues.id}}" when clicking the button?

0


More is going, see the example with the link. See if your variable is printing the correct link

<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>

<div class=container>
<a href="/questions/491528/icone-n%c3%a3o-aparece-como-desejado-usando-fontawesome/491529?noredirect=1#comment914014_491529"><button type="button" class="btn btn-danger float-right"><i class="far fa-trash-alt"></i></button></a>
</di>

Browser other questions tagged html css node.js twitter-bootstrap

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