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.
Related
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">
I have spent the last 2 weeks or so googling and asking around..with nothing found.
I'm looking for a referenceable image library, like an icon library. My thoughts are, if there are enough default images...it could be as useful and quick to implement images as it is to currently implement icons.
For example, Google Material design icons are referenced like
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons">
train
</i>
or IonIcon:
<link
href="https://unpkg.com/ionicons#4.1.2/dist/css/ionicons.min.css"
rel="stylesheet">
<i class="icon ion-md-heart"></i>
What I'm looking for is a image library like this. To allow for developers in my organization to link to default/stock images within their code with an icon tag. Like this:
<link
href="https://imagelibrary.com/here.min.css"
rel="stylesheet">
<i class="icon default-image1"></i>
I'm not a developer/coder, so perhaps there is something basic I'm missing, but this seems like a quicker way to link and change out default images rather than copying/finding a lengthy image url. (As long as the image file size is about the same as an icon.)
Thank you!
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 use font awesome icons on my website. (http://fortawesome.github.io/Font-Awesome/)
I am also thinking of adding the google translate widget to my website as a little tab at the bottom that prompts the user to translate the page if they need to. (https://translate.google.com/manager/website/)
However, if I run my site through google translate, all of the font awesome icons gets messed up. I'm thinking that google tries to translate the icons (since it's essentially just a font type). Does anyone have an idea to prevent this from happening?
You can see an example by just running the font awesome site through google translate. (https://translate.google.com/translate?hl=en&sl=en&tl=es&u=http%3A%2F%2Ffortawesome.github.io%2FFont-Awesome%2F)
Google Translate + Font Awesome = Not Awesome
Apparently (untested) you can add class="notranslate" to your stylesheet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" class="notranslate" />
Just add an attribute to your HTML like this:
<div translate="no">Let's keep this in plain English!</div>
or add a CSS class:
<div class="notranslate">Let's keep this in plain English, too!</div>
Both is possible, but the first one is W3C recommended and can by viewed in detail here: http://www.w3.org/International/questions/qa-translate-flag.en
UPDATE:
The above examples only work for text inside of HTML attributes. It does not include CSS content in the pseudo ::before attribute.
So, just include the fontawesome library through CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
You can add "notranslate" class where You have the problem, for example in my case the problem was in all material-icons, then I added "notranslate" class to all material icons using Jquery
$( document ).ready(function() {
$(".material-icons").addClass("notranslate");
});
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">