I can't add Font Awesome icon on the popup. Please, help me to figure out how it works. I don't know how to add the icon and change the color in CSS.
Here is HTML
<i class="fas fa-check-circle">
Here is CSS:
.fa-check-circle {color: #ffffff;}
What's wrong?
It doesn't work. I can't see the icon on the popup.
Here is my pin
Fontawesome library not added. Add it
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
fontawesome start page
the problem is that you'r not using font-awesome CDN,CDN is a content delivery network which refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos
In your case the classes (fas fa-check-circle) you've used are written inside the font-awesome servers .to access them you should link your webpage .To do that use the below link
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
Another way to use the fontawsome icons is to download their entire icon library which will contain their scripts and classes and linking them to your page directly
Replace this -
<i class="fas fa-check-circle">
With
<i class="fa fa-check-circle">
Change the css with this:
.fas {
color: red;
}
It isn’t clear from your code if you’ve included font awesome into your page. Add this line (between the tags) to your page.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Related
<i class="fa fa-laptop-code large-icon"></i>
I use this html code for font awesome icon, it's showing perfectly on desktop , the problem is only with mobile view.**
Oddly enough, adding random query string to my fontawesome cdn link (example: ?v=7857324) worked for me. Looks like in my case I just needed to force reload the file for my users..
From
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
to
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css?v=7857324">
Possible Problem 1
You are using the
<i class="fa fa-laptop-code large-icon"></i>
if you are using the latest version of font-awesome it is most likely
<i class="fas fa-laptop-code"></i>
try downgrading your version or updating your classes to "fas"
Possible Problem 2
Check on your mobile view if you have any css that is exists only on the mobile view e.g.
#media screen and (max-width:600px){
}
This problem mainly occurs when you use outdated Font Awesome CDN. Try using the latest one from their website.
Hope this will work.
I faced the same issue when I tried to host font awesome icons by myself using the all.css file inside my CSS folder and importing it to the HTML page. I resolved the issue by importing the font awesome CDN link instead of using the all.css file.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
For me this worked:
I was using the official fontawesome cdn. So I changed my current one for the one privide for fontawesome in their official web:
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
Make sure your mobile is connected to the internet
I am trying to use bulma icons following the docs here, but the icon doesn't show up:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div>
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>ICON</span>
</div>
Also see the fiddle here, what could be the problem?
You also need to include the bulma.min.css file, not just the .map.
Edit
Per the Bulma docs:
If you want to use icons with Bulma, don't forget to include Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Update 3/19/2019
As #Akshay has pointed out below, the documentation has changed and the proper way to include Font Awesome is now
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
Bulma icons won't show up unless you call fontawesome libraries, we can use a kit code for that. This will look like <script src="https://kit.fontawesome.com/xxxxxxxx.js"></script> in the <head>...</head> section of your code.
note: you can get the code "xxxxxxxx" for free usage of fontawesome icons from the website.
https://fontawesome.com/start
I want to use icons in my project, I add icons like this:
<a href="#">
<i class="icon-display4"></i>
<span class="visible-xs-inline-block position-right"> start</span>
</a>
And add I link them in <head>:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
But the icons don't show.
How can I fix this?
Make sure your icon actually exists. It looks like you're trying to use:
<i class="icon-user-tie">
But a search on the official website doesn't show this one as being an active icon.
You can add font awesome icons with example:
<i class="fa fa-plus"></i>
Here a list with all the icons from font awesome:
http://fontawesome.io/icons/
I can't understand the question, but I think this might be what you are looking for:
to add images, then use the tag, the syntax goes like this:
<img src="image location like https://i.imgur.com/HLXsgMd.jpg">
for linked images then put the image inside the a tag, like this:
<img src="image location">
to make a favicon (the icon that appears next to the page title) this should work:
Please do note that it has to be a .ico file see here.
<link rel="shortcut icon" href="image location">
If you Want To Use Icons In Your Page Then You Have to Use awesome icons
Go-to: http://fontawesome.io/icons/
First You Need To Add Font Awesome Css File On Your Page. then After You Can Used It any where in page.
Add This : <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
For example, I'm using this icon:
<i class="fa fa-pencil" aria-hidden="true"></i>
If by 'icons' you mean Bootstrap Glyphicons, I recommend visiting https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp, they also come predefined with bootstrap standard plugins e.g. glyphicons-halflings-regular files.
How can I use font-awesome in css? I searched and see that I just need to download and copy font-awesome directory into my porject then display the icon by using content in css.
http://fontawesome.io/get-started/
Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
From the documentation:
Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Then in the code of the page you insert an icon like that:
<i class="fa fa-camera-retro fa-2x"></i>
For more examples, see here. And here you will find the names of all icons.
I'm having trouble with the Font Awesome toggle on and off icons not appearing. All of the icons that I have been using have been working, but now this one doesn't seem to. Is there a work around, or a fix I can apply? I'm simply doing:
<i class="fa fa-toggle-on"></i>
I updated my css reference to the latest font-awesome stylesheet and now is all working.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">