Newbie question. I did meteor add fortawesome:fontawesome which was successful. Then in my client folder I created style.css with
body {
font-family: FontAwesome;
}
But its not having any effect. Other default fonts such as monospace, sans-serif are working fine.
I dont mind downloading and adding css, fonts etc but to which folder should I copy them to? client or public?
FontAwesome is a font icon set library, it would make little sense to use it globally on the body.
You need to add markup to your templates to insert icons in your website using this syntax :
<i class="fa fa-user"></i>
Have a look to FontAwesome docs to discover every icons and options available : http://fortawesome.github.io/Font-Awesome/icons/
Inside your template you have to use i tags:
<i class="fa fa-camera-retro fa-lg"></i>
For more information check the examples in the official page: http://fortawesome.github.io/Font-Awesome/examples/
you have a wide variety of icons to use: http://fortawesome.github.io/Font-Awesome/cheatsheet/
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
I'm trying to upgrade to FontAwesome 5 and it won't work. We run our website through OrchestraCMS that is native to Salesforce.
I've downloaded Version 5 and uploaded, as is, to my Static Resources. Then in my Visualforce Components Page Header I have added the below code:
<apex:stylesheet value="{!URLFOR($Resource.FontAwesome, '/FontAwesome/css/fontawesome.css')}" />
We use CSS pseudo elements, so I've updated all the classes according to the instructions:
.expired::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f017";
color: #886E3A;}
I've tried unzipping and uploading only the webfonts and css files, but that still doesn't work.
Any suggestions would be appreciated.
The official documentation tells you everything about "Hosting Font Awesome Yourself":
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Also please note that what was for example <i class="fa fa-home"></i> in version 4,
that is now <i class="fas fa-home"></i> in version 5.
(I think this could be your main problem.)
This is also well documented here:
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
After reading this two page I linked, I'm sure you will able to make it work.
Also check your browser's network tab to see if the needed css and font files for FontAwesome have been downloaded successfully. You know... no red lines and 404 :)
This may have been how my website was built in Salesforce, but for those having the same problem as me, I suggest the following:
Copy the fontawesome.css (remove the '../' from the URL at the bottom of the file) and the webfonts folder into your zip file in the static resources.
Then refer to your stylesheets:
These instructions are slightly different to the Font Awesome website, as uploading their zip file and referencing it didn't work for me.
I am seeing some strange behavior with the new fontAwesome 5; Some icons seem to show up just fine, and others appear as if they were bad unicode characters:
It appears to be a similar issue to This SO post, except that I am not using Ruby on Rails. Another difference here is that I tried adding a full path (rather than the relative path used) to the fonts in fontawesome-all.css, with no change.
Code:
<i class="far fa-chart-pie fa-fw" aria-hidden="true"></i> <!-- doesn't show -->
<i class="far fa-id-card fa-fw" aria-hidden="true"></i> <!-- shows -->
Reference to the css in <head>:
<link rel="stylesheet" href="/res/plugins/Font-Awesome/5.0.2/web-fonts-with-css/css/fontawesome-all.css">
I assume you don't have a pro license.
To use the regular theme for the chart-pie you need the pro license, for the regular version of the id card you don't.
<i class="far fa-id-card"></i>
<i class="fas fa-chart-pie"></i>
Just look on the official font awesome site at https://fontawesome.com/icons and then see if you can choose regular from the menu on the right. Some icons don't have this option for free. There you need to use the "fas" css class and not the "far" class.
While looking into a HTML 5 index page source, I got "icon fa-twitter".
On the front end of the Index page, there is the icon of twitter. I tried to search the icon in the files but it is not there.
Could anyone please explain what exactly this means?
This is likely to be using Font Awesome. Basically an icon font. Please see here
This is about font awsome :see doc
Example:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-twitter">Text</i>
It's Font Awesome icons. If you need to use Font Awesome icons please check this link
http://fortawesome.github.io/Font-Awesome/icons/
...and take a look at the twitter icon for an example.
I was wondering how to add an Icon link to a webpage. I.e a picture of the twitter logo and once clicked it goes to your twitter page.
I'm specifically wondering how the logo is made like that, is it a custom image or what?
Thanks!
EDIT: Sorry to specify I mean I am wondering if there is a database of icons that you can use for links or if they are created by the person that designed the web, not how to link a picture.
I recommend Font Awesome icons. Yes, it's very simple to use them as a link. Simply embed the external CSS file into your HTML, and add the respective classes to your items. Try something like this for your twitter image:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- This embeds the Font Awesome icons -->
<i class="fa fa-twitter-square fa-3x"></i>