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">
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 uncertain if these are native to bootstrap only, but I'm using the default favicons on my HTML.
<i class="fa fa-video-camera"></i>
favicons cheatsheet
I want to know if there is a simple way of changing the color of this favicon, such as inserting another class like alert or by putting a #fff for example on the .css
I am trying to avoid a response such as making my own colored version and using it on a
<link rel="shortcut icon" href="/PATH_TO_STATIC_FAVICON/favicon.ico" type="image/x-icon"> <link rel="icon" href="/PATH_TO_ANIMATED_FAVICON/favicon.ico" type="image/x-icon">
Cheers
Hope this will help you,
With the help of Bootstrap Color Utility you can achieve this.
For example to achieve green color you can use the class text-success
<i class="text-success fa fa-video-camera"></i>
---USING HTML
<i class="text-success fa fa-video-camera"></i>
· "text-success"
Bootstrap color classes
---USING CSS
.fa-video-camera{color:green;}
· "color:green"
--- for specific hex
·"color:#fff"
for specific hex I supose you would need the css code used above but with the #hex as you would normally do
--info**
"class fa" seems bootstrap-only, since I tried it on a stripped down html and didn't work
You can't use font awesome icons as a favicons. Those are just for styling your html.
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.
I am working with bootstrap and am using chrome.
I put the following code in my HTML file to import FontAwesome.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
And then put in the following icon.
<i class="fa fa-search"></i>
Nothing showed up at all! When I inspect element, it's a 0x0 text. No height no width. It doesn't show up at all.
If you are testing it locally add http: to the beginning of you href value.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I am trying to make a website based on the free HTML5up template
http://html5up.net/prologue
Anyone know how to get the Deviantart social icon? I tried adding the html code
fa fa-deviantart solo
but when I view it, the link is fine but the icon is in the shape of a can instead of the normal Deviantart icon. Please help? What am I doing wrong?
I am not sure if you have added the Font Awesome css inside your head tag or not.
With out that you can't get the icon you are looking for.
click here to download font awesome file. Or add this inside the head tag.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
below is the sample to add icons from font awesome collections.
<i class="fa fa-deviantart"></i> fa-deviantart
Please check this Font Awesome for more info.
The fa-deviantart is new in FontAwesome 4.1, and does not seem to be available in the template you're using. Try adding this line to your <head> tag:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
That should make the latest FA library available, and fa-deviantart worked when I tested it.