2

estou tentando por um icon bootstrap, mas não estou conseguindo..

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

importei no css

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

e fica assim .inserir a descrição da imagem aqui

1
  • Cara não importe o CSS do BS3 dentro do 4 vai dar problema d+! Vou tentar ver o que está pegando e tento te ajudar. o BS3 usavo o FW4, já BS4 não usa mais na biblioteca geral, mas indica que uso com ele o FW5
    – hugocsl
    Commented 3/10/2018 às 20:19

2 Respostas 2

2

Cara basicamente vc está usando as classes dos Glyphicon que era a biblioteca de ícons padrão do Bootstrap 3, dentro do Bootstrap 4, porém indexando o CSS do Fontawesome 5 e fazendo um @inport do Fontawesom 4 rss... está meio que tudo errado... Escolha apenas um deles para trabalhar...

Eu te indico continuar com o Fontawesome 5 mesmo, mas para isso vc precisa usar as classes corretas. Aqui tem um link com todos os ícones deles https://fontawesome.com/cheatsheet e aqui um basicão de como usar as classes: https://fontawesome.com/icons/address-book?style=solid

Basicamente para usar qualquer ícone vc tem que incluir uma tag assim: <i class="fas fa-address-book"></i>

Veja como fica no seu código:

<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

olá

Esta importação que você realizou está realizando refere-se à biblioteca dos " font-awesome icons". '

tente inserir tambem esses links:

'` https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

9
  • eu já inserir tudo isso man
    – Felipe
    Commented 3/10/2018 às 20:06
  • <link rel="stylesheet" href="use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    – Felipe
    Commented 3/10/2018 às 20:06
  • <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    – Felipe
    Commented 3/10/2018 às 20:06
  • <link href="css/bootstrap.min.css" rel="stylesheet">
    – Felipe
    Commented 3/10/2018 às 20:06
  • editei e coloquei todos os import's que fiz.
    – Felipe
    Commented 3/10/2018 às 20:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .