icons via Cdn are not displayed on the website

Asked

Viewed 241 times

0

I own a card and a link where I wanted to carry an icon of download, I use the class provided by font awesome, but the icon does not appear. I’ve read about specificity right here in SO-pt, I also saw that the style inline has a higher priority than the other selectors. Based on this I would like to know if possible which font certain icon uses so I can use the style inline and assign that same source or another way around it without I need to change my font-family of body, because I read that the icon needs a certain type of source (I do not know which one) and that most likely the one attributed to body could have a higher priority?

Follows the code:

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

  <div class="container">
  
    <div class="row">
    
      <div class="col-sm-12 col-md-6 col-lg-4">
			  
				<div class="card mb-5 mx-auto" style="width: 18rem;">
        
          <img src="img/festcasa/people-01.jpg" class="card-img-top" alt="...">

				  <div class="card-body text-center">

					  <h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Lorem Ipsum</strong><br/></h5>

						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
								
						<a href="img/festcasa/people-01.jpg" class="btn btn-primary" download><i class="fas fa-download"></i>Currículo</a>

				  </div>
          
			  </div>
        
		  </div>
      
    </div>
    
  </div>
  
  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

css font-awesome icons

1 answer

2


Face I know problem is that you are using the class of the icons of versão 5 of the Fontawesome, but is importing in its head the versão 4 do Fontawesome... Just change the link from the version to the one you want...


Link to version 4: https://fontawesome.com/v4.7.0/icon/download
inserir a descrição da imagem aqui


Linde of version 5: https://fontawesome.com/icons/download?style=solid
inserir a descrição da imagem aqui


Look here I did not touch anything code, I just commented on the link that indexes version 4 and put the version 5 and its icon appeared...

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />


    <div class="container">

        <div class="row">

            <div class="col-sm-12 col-md-6 col-lg-4">

                <div class="card mb-5 mx-auto" style="width: 18rem;">

                    <img src="img/festcasa/people-01.jpg" class="card-img-top" alt="...">

                    <div class="card-body text-center">

                        <h5 class="card-title"><strong style="color: #08979b; font-weight: bold">Lorem Ipsum</strong><br /></h5>

                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                        <a href="img/festcasa/people-01.jpg" class="btn btn-primary" download><i class="fas fa-download"></i>Currículo</a>

                    </div>

                </div>

            </div>

        </div>

    </div>

  • but it would have like me to switch between the versions of the icons on the awesome font site?

  • @I don’t understand what you’re trying to change.... If you import version 4 of FW you have to use the link classes that I placed above, but the "design" of the icons are a little different between version 4 and 5. Also, in version 5 you have some icons that are paid, you can only use if you buy... If you need anything, just say I’ll help you

  • wanted to know where to go to find the icons of the previous version, but I could find in the footer of the site, thanks!

  • @Lucasinácio a tá rss, I had not understood what you wanted :D, but how nice that you found there, qq thing to in the area. [] s

Browser other questions tagged css font-awesome icons

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