I want to know, how can I use the font awesome's offline icons with :before or :after pseudo in CSS?
If I use CDN instead of offline then it Works perfectly but not with offline files.
.mydiv::before {
content: "\25AE";
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
How to set it up depends on your solution. Are you using simple CSS or any CSS preprocessors?
Let's assume you are using simple CSS:
Download and extract the package
Copy two folders: /webfonts and /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets).
Link it in the head tag of every HTML page that you need
like this:
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
</head>
For more info, take a look at the official guide on how to host it by yourself: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Download required file from Font Awesome website
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Create a new folder /fonts/
Unzip the download into this folder.
Then add <link href="fonts/css/all.css" rel="stylesheet"> in the <head> section.
It is easy to use them in your webpage, for examples see https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Related
I've been using fontawesome for one of my web projects and it works fine when I use the CDN link as its stylesheet but when I want to have everything locally and download FontAwesome(zip file) from the website, it becomes messy and shows multiple icons as some kind of bad zoom problem over its png file of icons.
the only change is
this
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
into this
<link src="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet">
Again, the problem isnt that its not working, its how it shows multiple icons.
Assure you have downloaded the full package with correct version from the FontAwesome website and use a correct link, such as:
<link href="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet" >
Reset your browsers cache.
Assure that the or element you use, uses the FontAwesome font family. For example:
<i class="fa-pencil" title="Edit"></i>
but
<i class="fa fa-pencil" title="Edit"></i>
It won't work if you have something as the following in your CSS:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
If you are using IE, just dont...
If this doesn't work, just give it one hour or two(trust me sometimes browser plays jokes on itself), if problem was persistant, check https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting
Im trying to install font awesome to my simple sass project i have.
1 simple html page linking to 1 css file that is spit out via my sass.
Is there anyway of installing it locally to that project folder?
I couldnt see anything on the website
http://fontawesome.io/get-started/
You have to link it through ruby rails.
Ive managed to import font awesome but the icon just shows up as a box so i think its looking for the missing svg.
Try to this:
Go to this site: http://fontawesome.io/get-started/
and Click no Download Folder.
Add font-awesome.css stylesheet in your head tag &
Add font folder also, Please give font path proper in the font-awesome.css stylesheet.
<head>
<link rel="stylesheet" href="[http://fontawesome.io/assets/font-awesome/css/font-awesome.css][1]"/>
</head>
I'm using ruby on rails version 5.0.0, and I'm using c9.io. I'm not that sure how to use Google fonts and where I would put the embed font code:
<link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet">
I know that I have to put font-family: 'Delius', cursive; in the css file, but if I do that without doing the previous, the only font it uses is Comic Sans.
I learned the answer but I'd still like to know which folder would you put it in?
You can import it wih CSS - Place this at the top of your css file:
#import url('https://fonts.googleapis.com/css?family=Delius');
I figured it out. You put <link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet"> in the application.html.erb file.
I am trying to assign some of the new 4.3 icons to my forum nodes.
Here is the forum link: enter link description here
The problem I am having is the older icons show up just fine, but the new icons show up as a square white box.
Here is some existing working code followed by the new icon code that is not working.
Working Icon:
/* General Chat */
.node_9 .forumNodeInfo .nodeIcon:before {content: '\f1d7' !important;}
Not Working Icon:
/* Requests */
.node_112 .forumNodeInfo .nodeIcon:before {content: '\f234' !important;}
I have no idea how to fix this. Any help would be appreciated.
I did read this:
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
Copy the entire font-awesome directory into your project. In the
of your html, reference the location to your
font-awesome.min.css. Check out the
examples to start using Font Awesome!
I do not understand what it is asking me where to do, as all of my customization are in extra.css . I do not have a RAW html site that uses
Thank You
You are using the old CDN reference URL for FontAwesome.
Replace in header
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
with this
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
So I have twitter bootstrap response in my app assets stylesheets, and it shows in the head of the document from Google Chrome's dev tools like so:
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css">
Yet when I use classes to try and make bootstrap buttons, use the grid system or the built-in nav, nothing happens. For instance, Here's how I tried to the gride system to work.
%h1 Your Polls
.dashboard-wrapper.row
.user-polls.span6
%h1 test
.create-polls.span6
= link_to 'Create New Poll', new_poll_path, remote: true
With this CSS:
.dashboard-wrapper{
margin-top: 50px;
}
.user-polls {
}
.create-polls{
}
Any ideas on why it might not be working?
Thanks!!
bootstrap-responsive.css is a small file containing responsive (phone/tablet) tweaks for the main bootstrap.css file. Did you include the main bootstrap.css file?