How to get an icon from font? Or convert font icon to .svg. I more interest in process (not third-party services)
On Windows, what I did was to install the font locally and then go into Character Map and find the symbol I'm looking for.
Then I copied and went into Illustrator and created an empty text box, pasted the symbol and then selected the icon font.
Then I just right clicked and converted to outline and exported to SVG.
If you don't have Illustrator, try doing the same thing within Inkscape (it's free).
You don't need to convert them into svgs by yourself, they already provide you with the svg code for each and every icon they offer on their official website; You can download the equivalent svg code for an icon of your choice from the following link:
https://github.com/FortAwesome/Font-Awesome/tree/master/svgs
There you will find svg code for all the Regular,Solid and Brands icons that you would see on the https://fontawesome.com/icons
Simply goto the https://fontawesome.com/icons choose an icon of your choice that you would like to use in your project and find the corresponding svg file from the list of files that you just downloaded from the above given link;
open the svg file in a code editor and copy the shape code from there which you can further consume!!!
HOW TO CONSUME? Well that's another topic....
P.S: Here is the link to the sprite file to download all the svg shapes in one file:
https://github.com/FortAwesome/Font-Awesome/tree/master/sprites
Related
I have to modify a legacy application and I want to quickly figure out what version of Font-Awesome the application is running, so I know which icons are available.
As that application is using complied CSS, I was unable to determine from the page's resources.
I imagine something like a JavaScript command or inserting an icon like fa-version which renders the version number.
You could try the following :
Locate CSS File
locate the use of a fontawesome icon in a page. Using Developper Tool (F12), find which CSS file gives the icon (and font).
In this file, search for a version number in comments (some CSS compiler keeps these comments)
Locate the Font file
in the previously located CSS file, search for the following string :
#font-face{font-family:FontAwesome;src:url(fontawesome....eot)}
Either the font file contains the version number, either you should go deeper.
Look for version in font file
Download the font file (you can guess the URL based on file name and CSS file URL)
Open the file in your favorite text editor and search for Version
To be clear I'm definitely not a very good graphics person... but I needed some number icons, and looking all over IcoMoon I could only find one set: http://brankic1979.com/icons/. The problem is I was expecting a CSS sheet or something I could download and then reference like a Bootstrap glyphicon, e.g., <span class="glyphicon glyphicon-name"></span>. This set is downloaded as a PSD file. Honestly I have no idea whatsoever where to go from here...
It seems like I can use IcoMoon to generate the icon if I import an SVG file, but I have no idea how to convert the PSD file items to an SVG file (I tried to copy one individually to a new canvas, but save as SVG is not an option). Any help appreciated!
Just do the following in Photoshop:
file > export > export as... >
than in the top right corner you see an area called file settings and then it says format. You just click the drop down and change it to a SVG.
I've made an image in Photoshop, but it won't show on my site. Instead, it shows up with the little white box with the ripped paper icon. Do I need to convert the PSD file to some other sort of file?
Here is my HTML snippet:
<!doctype html>
<link rel="stylesheet" href="styles.css">
<img src='file:///C:/Users/Tom/Pictures/logo.psd'>
<div align="center">
<h1>Home</h1>
Home
My Products
About
</div>
A PSD file is a file format used by and specific for Adobe Photoshop. Other applications (like your webbrowser) do not know how to read it. You need to convert it to another format.
In Photoshop, with the document open, click File » Save As..., and then select as file format the desired format (see image below). Which format to choose, is pretty much explained in another Stack Overflow answer.
It is also recommended that you avoid using file:///C:/Users/Tom/Pictures/logo.psd for links; use relative links instead. If you are ever about to put your website online, with many users, the image won't show up, because the browser of the visitors of your website will look for a file located in C:/Users/Tom/Pictures/logo.psd on their own computes.
You should use jpeg, png or gif, depending on what's more appropriate for your image. Take a look at this other answer for guidance:
https://stackoverflow.com/a/392646/1203176
You can't use a PSD in your website. Convert it to PNG, JPG, GIF or some other format.
You can do this by clicking file > Save for Web.
In the right corner you can select the new image type.
PSD is not a valid web image format. You might export your image in one of the following formats:
JPEG / JPG
PNG
GIF
You must convert it to png for exemple. to do that just open your logo.psd in photoshop and then click file==> save as and choose the png extension.
Web browsers do not render .psd files. This file extension is only properly understood by Adobe Photoshop.
Open your .psd in Adobe Photoshop
Select File -> Save for Web and Devices...
Save your file as .jpg or .png
Use this new saved file as a substitute image where you have the .psd in your .html file
So my precise problem stems up from the fact that I am unable to make a vector icon for one of my icons. I have that icon as a image file but if I try to convert it using raster vector image it looks horrible. As I can't make it a vector svg file I can't include that as part of the awesome font.
Now my real problem.
The icon gets displayed using a directive
<i class="icon-{variable name}"></i>
This variable portion is changed upon the response from my API. For all other icons it will work. However for obvious reasons for the icon I want it won't find it in awesome font. hence when it encounters "icon-custom" I want the css in the awesome font which generally shows something like
.icon-wap:before {
content: "\f102";
}
to point and load a specific .png file (my icon).
Is this even possible with the css?
I knew there was a way to using variables.less in bootstrap sprites to load custom glyph. but it seems that's not a possibility now.
So is there a way i can do this?
First you need to package your icon into a font file just like how font-awesome did. Your icon need to be in vector format.
Font Custom is a tool to convert SVG images into your own font icon set. It requires a couple packages to install from brew or apt-get (Mac and Linux only right now) and then a gem to watch a directory and build the font.
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.