Font awesome is service provide free/paid icons, and sometime we feel like to use it offline as part of our own project to remove dependency from network resource.
but how? sometime we think we followed all steps mentioned in article by them but we miss something. and that why I write this q&A.
How to use Font Awesome offline?
As of writing this answer, the latest version of Font Awesome is 5.15.4
Following the Font Awesome documentation on Hosting Font Awesome Yourself
Download the free version of Font Awesome from here
Extract the downloaded package
Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory.
Add a reference to the copied /css/all.css file like the below code into the <head> element of each template or page that you want to use Font Awesome on.
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
Now you can start using the font awesome icons locally in your project <i class="fas fa-user"></i>
Follow first their article: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
The /css/all.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.
Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).
Add a reference to the copied /css/all.css file into the of each template or page that you want to use Font Awesome on.
After then do this.
#font-face{
font-family:Font Awesome\ 5 Free;
font-style:normal;
font-weight:900;
src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot');
src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot?#iefix') format("embedded-opentype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff2') format("woff2"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff') format("woff"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.ttf') format("truetype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.svg#fontawesome') format("svg")
}
Related
I am using Font Awsome Version 4.7.0.
Currently, I need to get Viber Icon but it is not available in the above-mentioned version.
I am not able to upgrade the Font Awsome version since it can affect to the whole system.
Is there a way to include Viber icon to the existing version.
I found the solution by myself.
I could find the below-mentioned repository which includes all the necessary CSS and font files generate the Viber icon.
I just needed to import additional Font files and CSS files related only to Viber Icon and import the CSS file.
Repository : http://kukac7.github.io/fa-viber
I'm trying to use Erik Flower's excellent looking weather icons here, but I can't get it to work. I'm using Flask and the folder structure looks like this:
-static
-css
-fonts
-js
I have copied the fonts and css files into their respective folders above. I insert a link to the css files like this:
<link href="{{ url_for('.static', filename='css/weather-icons.min.css') }}" rel="stylesheet" media="screen">
And it appears to work fine, I can go to the css file when I view page source. But when I try to display the icons as described in github page like this:
<i class="wi wi-day-sunny"></i>
I just get a square. I assume it's not finding the fonts where it is expecting them, but the twitter bootstrap fonts are in the same directory and seem to work fine (I can see the glyphicons).
I apologize for what might be a stupid mistake.
Thanks a lot,
Alex
Assuming you didn't change anything in the CSS file, the path to the font file(s) is incorrect.
Bootstrap, by default, expects the Glyphicons font file to be in a "fonts" directory, but the CSS for the weather icons is looking for a "font" directory (notice the missing 's'). Adjust the CSS or copy the fonts to the correct directory.
you need to install the font in your operating system as a usable font...
on windows this means put the "weather icons regular.ttf" file into the fonts folder (you can easily get to it from the control panel).
after that just use the unicode hex codes for what you want to display, and tell the widget to use the font you installed.... the codes and associations for various weather apis are in the "values" folder of the "weather-icons-master" folder, under the weathericons.xml
for python 3.6
from tkinter.font import font
...
weather = Font(family="weather icons regular")
fontsize = 20
...
example = Button(master, text="\uf01e,\uf01e,\u...", command=some_def)
example.configure(font=(weather, fontsize), fg="white", bg="black")
example.pack()
obviously you can adjust your font and widget styling the way you want it to look...
So I know this is a very newbie question but I cant seem to figure this out, don't know what I am doing wrong here. Downloaded a font from Google Fonts, installed it on my machine and am referencing it in my css like this:
* { margin:0; padding:0; font-family:Lobster; }
In my html I just have a p tag:
<p> Hi, this is some text</p>
Are there any extra steps that need to be taken to use a google font installed on your local machine ??
The correct syntax to use a font is font-family:'Lobster', Arial;
Here if the Lobster font is not available it will use the Arial.
Also you can just import a font file in the css.
CSS
#import url(//fonts.googleapis.com/css?family=Lobster:400);
body{ font-family:'Lobster', Arial; }
DEMO
You dont need to download google fonts on your machine to add in your web pages.
Add the following link between your ead tags
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lobster">
There are no extra steps that you need to take if you have actually not just downloaded the font but also installed it (so that you can see it e.g. in the font menu of Notepad) and you just want to see that font used when you locally view your own pages.
If you want to use it on web pages, you should generate the relevant font files in different formats, upload them onto your server, and use #font-face syntax that deals with them.
I've been using Font Awesome for a little while now, and was updating to 4.0 today. I decided to use the BootstrapCDN this time, and I've run into problems. The icons aren't being displayed despite using the new class names.
The CSS file is getting pulled down fine, but when I look at developer tools in Chrome the fonts aren't being served. Based on the relative path to the font within the CSS file (src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');), I was able to test the link and download the font:
http://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?v=4.0.0
So the link is correct (of course). Anyone know why the font isn't being served?
You have to do more than just use the new class names. Did you make sure that you added the fa class as well?
updating fonts to existing fonts
I’m already using 5 icomoon fonts in our website which was downloaded from icomoon. I want to include 2 more fonts. What should I do?
Can I add the new 2 fonts to existing fonts?
If yes, How can i add them?
I'm assuming you want to add new "icons" to your existing fonts. The font pack that you download from IcoMoon comes with a "selection.json" file. If you have this file, import it to the IcoMoon app using the Import Icons button. After doing so, you can select more icons to generate a new font.
If you don't have access to this "selection.json" file, you could import your SVG font using the same Import Icons button. The downside in this case is that you may need to add your glyph names again.
Anonther way to save/load previously created fonts is using the project manager: Main Menu > Manage Projects. You may want to download your project so that you can load it back later.
More info: https://icomoon.io/#docs/save-load
at present icomoon does not allow you to import .ttf files. but it can be done using a svg, use services like http://freefontconverter.com/ to convert your .ttf file into an svg, once it is done you can import the svg file it in your current project and add more icons to it.
go to the icomoon site, click on the icomoon app, click on the import button and import the old icomoon.SVG file which is in your code you can see all the icons which are in that file in icomoon site once import is done and also import new SVG or select from already existing icomoon list which you want to add to the existing list, select all(i.e old icons which are already there and new icons which you want to add to the existing list) click on generate font and then download that file, extract it you can see fonts folder copy all the files in that folder and paste it in your code(I mean replace the existing files in your code with this files) and you can see styles.css folder in extracted icomoon zip there you can see newly generated classes, copy those newly generated classes and paste it in your code where other icon classes are present
Not sure if this has been resolved yet as it's an old question but there are a few approaches you can take depending on what you currently have available.
Ideally you will still have the selection.json file from when you first downloaded the first 5 icomoon fonts. If not you might still have the project stored in your browser. If so then you will have the current 5 fonts as is with all the settings and class names the same.
If you are able to get that great then you will only need to add in the code for the two new fonts. To add the two new fonts you can import the entire font file for both to IcoMoon by selecting the svg version of the font. Then add it to your existing font that has the original 5 fonts and you should be good to go.
The key is restoring the original 5 so work doesn't need to be repeated to get everything back to as it was. If you can't do this than it is probably easier to add the 2 new fonts as a new project in icomoon and just condense those 2 fonts into 1 new icon font.
I have some information on the basics of icomoon and importing projects here: http://stephentvedt.com/2014/04/03/using-custom-icon-fonts-icomoon-quickstart/
As an alternative;
If you have an existing TTF (True Type Font), use for example font-converter.net to convert the TTF to SVG. In IcoMoon you can now click "Import" to bring back your icons/characters by importing the SVG file, and add icons as you see fit.
In case you're looking at another font format (under MacOS, TTC for example), then first consider converting it to a TTF (this worked for me: transfonter.org).
Note: I'm in no way affiliated with either websites.
I tried Vaibhav Soni's suggestion first, but that website seems no longer working properly.
Also note that certain fonts are commercial and/or have copyright limitations, so you should not use those fonts in this fashion.
The correct way, You should import all previous module icons and new icons. Then generate fonts and replace the fonts folder and style.css file directory in your code.