I would like to use FontAwesome in a WordPress theme for social media icons but I want to have all the FontAwesome files on my own server in a separate folder like /theme/assets/fonts/..Which Font Awesome package do I need, the web or the desktop one?
I always get confused by FontAwesome terminology aswell, but this is what you should use https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself (which is the web version). The only thing left for you to choose form is if you want it in SVG version of standard font. That's totally up to you
Currently using Fontawesome v4.7 but there is an icon (fa-fire) which has been updated and is included within Fontawesome 5 package. Is it possible to update the css file or the webfonts files without downloading the whole v5 package and removing/adding files?
I fear this might create more trouble than benefit. The icons are now split over several font-files, so you can not just exchange the font-files and edit the CSS for just that icon etc.
But if you really want to use the new icon (and only that one icon), you could use the SVG-Sprite for that. Will still require to change your code (you won't be able to access it as fa-fire), but hey - you'd be able to use a FA5-Icon on a FA4-Site!
I uploaded the files to my server but I'm only using 5 icons in my site.
How can I delete the Font Awesome icons that I will never use? Like the useful and beautiful Stethoscope.
http://fortawesome.github.io/Font-Awesome/icon/stethoscope/
Thank you
It sounds like you copied the entire font-awesome directory into your project, and this isn't the result you are looking for. If you only want 5 of the Font Awesome icons in your project, and not have the balance of icons available for future use, take a look at Fontello.
Fontello is an icon fonts generator which allows you to pick and choose only the icon fonts you want for your project.
Here's a link to Fontello on GitHub, with information on how to use it:
https://github.com/fontello/fontello/wiki/Help
Another option you have if you only need a few icons, it's IcoMoon where you can choose the icons that are going to be loaded only including the ones from Font-Awesome.
Otherwise, check this blog that explains how to reduce font-awesome size.
If you are using javascript module imports try:
import { faCoffee } from '#fortawesome/free-solid-svg-icons/faCoffee' // <-- note the extra faCoffee there
I've been using Sencha Touch for a long time and now I'm trying Sencha Architect. I need to include FontAwesome to use more icons in my buttons. The problem is that I don't know where I have to write:
#include icon-font('Awesome', inline-font-files('awesome/fontawesome-webfont.woff', woff, 'awesome/fontawesome-webfont.ttf', truetype,'awesome/fontawesome-webfont.svg', svg));
Besides, I'm not sure which is the folder where the fonts has to be located. If I put the fonts in resources/scss/stylesheets/fonts/awesome, the compiler throws some errors. If I put the fonts in Library/Application Support/Sencha/Sencha Architect 3.0/extracted/touch23-compile/themes/fonts, it works, but I don't think this is the best solution.
Does anybody know the best way to include new fonts to a Sencha Architect project?
Thank you all.
In 'resources->saas->stylesheets->fonts->fontAwesome' put all the .eot, .svg, .ttf and .woff files.
In your app.scss file include it
// Custom font
#include icon-font('CustomIcons', inline-font-files(
'fontAwesome/fontawesome-webfont.woff', woff,
'fontAwesome/fontawesome-webfont.ttf', truetype,
'fontAwesome/fontawesome-webfont.svg', svg,
'fontAwesome/fontawesome-webfont.eot', eot
));
after
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
and include icons likes #include icon("settings", '\f085', "CustomIcons");
Now 'settings' class can be used in iconCls to show the http://fortawesome.github.io/Font-Awesome/icon/cogs/ icon.
N.B. Don't forget to compile the scss file.
I've recently created this new app that will help you to prepare an icons and corresponding SASS file (_icons-myfont.scss) for your Sencha apps. This has been tested with Sencha Architect projects.
The README explains the steps for creating icons at the Ico Moon web site and using the tool to convert Ico Moon project files into SCSS for use in Sencha Touch.
https://github.com/tohagan/sencha-ico-moon
I have the same problem.
I try it,but failed.I found a easy way to make it.
1. download the font file and css,and put them into floder (like your_architect_floder/css/)
2. import the css in the architect as resources
3. add a button ,dont use "text",but use the html.
'edit'
amazing ?
:-D
I am migrating from bootstrap 2.3 to bootstrap 3 and everything works well. But when I tried to add some icons, the icon font doesn't displayed properly. I tried to look over here http://bootply.com/61521 and only '.glyphicon-envelope' was being displayed properly. Others have displayed like 'E001' and so on.
How can I be able to solve this problem?
For other browsers, glyphicons are displayed properly, only firefox was unables to display it properly.
Did you choose the customized version of Bootstrap? There is an issue that the font files included in the customized package are broken (see https://github.com/twbs/bootstrap/issues/9925). If you do not want to use the CDN, you have to download them manually and replace your own fonts with the downloaded ones:
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot
After that try a strong reload (CTRL + F5), hope it helps.
the icons and the css are now seperated out from bootstrap. here is a fiddle that is from another stackoverflow answer
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
http://jsfiddle.net/aQrPd/1/
Bootstrap 3 Glyphicons CDN
OK, my problem was not answered by the above. I had the fonts folder at the same location as the bootstrap css and js folders (eg /theme/bootstrap3/..), but it was looking for the font folder in the root (eg /fonts/glyph.. .woff)
The solution for me was to set the #icon-font-path variable to the correct relative path:
Eg #icon-font-path: "fonts/";
Here's the fix that worked for me. Firefox has a file origin policy that causes this. To fix do the following steps:
open about:config in firefox
Find security.fileuri.strict_origin_policy property and change it from ‘true’ to ‘false.’
Voial! you are good to go!
Details:
http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts
You will only see this issue when accessing a file using file:/// protocol
I had the same problem using a local apache server. This solved my problem:
http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons
For Amazon s3 you need to edit your CORS configuration:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
First of all, I try to install the glyphicons fonts by the "oficial" way, with the zip file. I could not do it.
This is my step-by-step solution:
Go to the web page of Bootstrap and then to the "Components"
section.
Open the browser console. In Chrome, Ctrl+Shift+C.
In section Resources, inside Frames/getbootstrap.com/Fonts you will
find the font that actually is running the glyphicons. It's
recommended to use the private mode to evade cache.
With URL of
the font file (right-click on the file showed on resources list),
copy it in a new tab, and press ENTER. This will download the font
file.
Copy another time the URL in a tab and change the font
extension to eot, ttf, svg or woff, ass you like.
However, for a more easy acces, this is the link of the woff file.
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
I ended up switching to Font-Awesome Icons. They are just as good if not better, and all you need to do is link in the font, happy days.
make sure the name of the folder that contains the font name is "fonts" not "font"
you can use tag like this:
<i class="fa fa-edit"></i>
Just in case :
For example, I just tryed <span class="icones glyphicon glyphicon-pen">
and after one hour i realized that this icon was not included in the bootstrap pack !! While the enveloppe icon was working fine..
Hope this helps
As others have noted, there are some issues with the customizer.
I was having troubles with the glyphicons not showing either, as well as issues with the navbar layout.
I used the suggestion and uploaded the fonts from the full zip/overwrote the ones from the customized version and that fixed the icons issues.
I also pulled in the CDN CSS and javascript instead of my local copy from the CDN. This fixed my navbar issues.
So I recommend until you get the hang of Bootstrap, not to use the customized version since you might get some frustrating, unwanted results.
For me placing my fonts folder as per location specified in bootstrap.css solved the problem
Mostly its fonts folder should be in parent directory of bootstrap.css file .
I faced this problem , and researching many answers , if anyone still in 2015 faces this problem then its either a CSS problem , or location mismatch for files .
The bug has already been solved by bootstrap
This is the official documentation supporting the above answers.
Changing the icon font location
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
Change the #icon-font-path and/or #icon-font-name variables in the source Less files.
Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.
Other than this one mistake the new users would do is, after downloading the bootstrap zip from the official website. They would tend to skip the fonts folder for copying in their dev setup. So missing fonts folder can also lead to this problem
Try using CDN
Try setting Access-Control-Allow-Origin HTTP Header