bootstrap icons

Asked

Viewed 908 times

1

I’m trying to get an icon bootstrap, but I’m not getting it..

      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->

        <link rel="stylesheet" href="css/xd.css">
          <link rel="stylesheet" href="css/cardslider.css">
        <link href="css/bootstrap.min.css" rel="stylesheet">
      </head>
        <div class="container">
        <div class="row  " id="lul">
            <div class="col-12 d-flex">
              <span class="glyphicon glyphicon-star">x</span>
              <h3 class="mr-auto mt-3">Novidades</h3>
              <a class="btn btn-outline-secondary prev mt-3 mb-3" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
              <a class="btn btn-outline-secondary next mt-3 mb-3" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
            </div>
        </div>
        </div>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <script src="js/popper.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script>

imported in css

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);

and stay like this .inserir a descrição da imagem aqui

html css twitter-bootstrap

  • Dude don’t import the CSS of BS3 inside the 4 will give problem d+! I will try to see what is picking up and try to help you. BS3 uses FW4, BS4 no longer uses it in the general library, but indicates that FW5 is used with it

2 answers

1


Dude basically you are using the Glyphicon classes that were the standard icon library of Bootstrap 3, inside Bootstrap 4, but by indexing the CSS of Fontawesome 5 and making a @inport of Fontawesom 4 rss... it’s kind of all wrong... Choose only one of them to work...

I advise you to continue with Fontawesome 5 even, but for this you need to use the correct classes. Here is a link with all the icons of them https://fontawesome.com/cheatsheet and here a basic of how to use the classes: https://fontawesome.com/icons/address-book?style=solid

Basically to use any icon you have to include a tag like this: <i class="fas fa-address-book"></i>

See how it looks in your code:

<link rel="stylesheet" type="text/css" media="screen"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    

    <i class="fa fa-lg fa-adjust">
    <i class="fa fa-lg fa-address-card"></i>

    <div class="container">
        <div class="row  " id="lul">
            <div class="col-12 d-flex">
              <span class="glyphicon glyphicon-star">x</span>
              
              <h3 class="mr-auto mt-3">Novidades</h3>
              <a class="btn btn-outline-secondary prev mt-3 mb-3" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
              <a class="btn btn-outline-secondary next mt-3 mb-3" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
            </div>
        </div>
    </div>

0

  • I already insert all this man

  • <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" Integrity="sha384-hWVflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+A4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="Anonymous">

  • <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" Integrity="sha384-Chfqxuzucnjsk3+Mxmpniye6zbwh2imqe241ryiqjxymiz6ow/Jmzq5stweulty" crossorigin="Anonymous"></script>

  • <link href="css/bootstrap.min.css" rel="stylesheet">

  • I edited and put in all the import’s I made.

  • Well, from what you’ve gone through here, the bootstrap script is coming from Cdn, while the css you’re searching for from a local folder. Try placing imports either directly through the Cdn links or just through your local folders. If it doesn’t work with local folders check that your bootstrap versions are the same. I also recommend taking a look at this link https://www.w3schools.com/booTsTrap/tryit.asp?filename=trybs_default&stacked=h. where it is possible to see how to import

  • eu importando o <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" Integrity="sha384-Bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+Pmstsz/K68vbjhde4u" crossorigin="Anonymous"> funciona mas bagunça todo resto do meu codigo :(

  • It could be bootstrap version conflict that you have on the local machine with the server. Make sure you have bootstrap.min.js downloaded locally with css and try to remove imports via link. If everything goes wrong, make sure the import path of your files is following the correct path

  • If my solution has solved your problem, please mark it as an answer! :)

Show 4 more comments

Browser other questions tagged html css twitter-bootstrap

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