I have my own custom SVG. I have font awesome working on a site I own. I'm not familiar with exactly how it is installed etc. Are there any really basic instructions on how to add an icon to it please?
I am reading and trying these instructions here http://spin.atomicobject.com/2012/12/16/create-your-own-font-awesome-icons/
Related
I need to include the 'proxima-nova' font in the project.
I tried to find it in google fonts
but he is not there. I found it on fonts.adobe.com, but I don't know if it's possible to connect it somehow, maybe someone knows what solutions can be?
On google fonts "Nanum Gothic" is pretty similar to proxima-nova
Metropolis can also help it is most fantastic and nearly alternative to Proxima Nova.
In order to use the font from Adobe you need to have an active license.
Then you would be able to download the font and add it to your project as described here: https://www.w3schools.com/css/css3_fonts.asp
get your fonts from google fonts, its free with tons of fonts.
scroll and select the font you like
then scroll down
then select the font style you like and click the little plus icon
once you selected all the styles you like click the icon in the top right of the page
use the red link code in the top of your html, and use the blue in your css
I need SVG sources for icons so I can use them in sketch for mockups. However it seems as if there's no SVG library like Google's Material Icons, only the code for integration.
I think the version 5 will have a SVG SDK, however meanwhile, you can use https://icomoon.io/app/ to export SVGs from Font Awesome (and other packs) icons.
There is now (as of version 5). Free icons here. This outlines how to use them.
I'm looking at this site: http://www.calgaryclimbing.com/rates/ . On their footer they have very clean looking icons that link to their social media pages. I want to do the same using the same icons they are using. But when I inspect the elements It shows that they use an i tag and that the class links to some css code that uses the content property. I want to use the image icon so my questions are how can I get the image? And why was it programmed this way? Why not just use an image that you could click on?
I didn't check the link you provided but it's most likely a custom font just like Font-Awesome which you can use to put many kind of icons in your Web Site/App.
Font-Awesome use the <i> tag as well just like you explained.
Why using Font-Awesome?
As they say:
Font Awesome gives you scalable vector icons that can instantly be
customized — size, color, drop shadow, and anything that can be done
with the power of CSS
I am running twitter bootstrap3, and I am extremely happy with the new way it handles the icon as fonts. However: I need some custom icons; I need to make them myself, and ideally integrate it into the existing font. I have searched with no luck. I am well familiar with illustrator, vector graphics etc, but how to integrate?
Worst case scenario, I will make images the traditional way, but hope there is a better solution.
How do I integrate a custom glyphicon with the existing (bootstrap 3) glyphicon font?
This process might be one option.
You could use the IcoMoon App. Their library includes FontAwesome which would get you off to a quick start, or you download glyphicon, and upload the fontawesome-webfont.svg
For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set.
When you are finished export the font set and load it as you would any icon font.
Good luck!
UPDATE
If your imported SVG file icons seem misaligned after importing into the iconmoom.app, first check how they actually look when used on a web page. It seems to me that the preview may not always be perfect. Alternatively, there is an edit icon in the iconmoon.app tool bar which lets you move and resize.
If anyone is looking for an alternate tool to the one mentioned here, I've found Glyphter to be very useful. It is fairly straight forward and allows you to upload an .svg file, groom it, and add more glyphs from several other font packs. You can then download the entire bundle as its own font.
I tried adding a custom icon by converting it into .svg format. I added the converted .svg icon by importing it into http://icomoon.io/app/ and downloaded as .png image. It was not the original image.It was a simple black box. Am i missing something here??
I am doing this now. Check out this tutorial! It uses a utility called Font Custom, which from the sounds of it you might not need, but maybe the tutorial will help you get back on track.
Create your own Font Awesome Icons