I would like to add the following image...
in to a font-family that I am using on my website...
http://fortawesome.github.io/Font-Awesome/
which does not include this as an icon option.
What is the most effective and efficient process in achieving this?
You can create your own icon font-family with Inkscape using svg vector images. There is a great tutorial on webdesignerdepot.com about this. Don't add icons to an existing font whether that is possible or not, Font Awesome might get updated now and then with new fonts.
Related
In my Vue 3 project I need to use some Font Awesome icons, but not all obviously. But if I load icons as webfont, it loads all informations of all icons.
If I use icons as SVG I lost the benefit using icons as font. For example: adjust to font size, color, etc.
In Angular I can use <fa-icon ...> tag to use icons like this.
How can I load only used icons but still keep font-behavior benefits?
Have a look at #unocss/preset-icons it will do it automatically for you and you will gain access to a bunch of other icons as well.
The CSS it uses for the icons is different, they are not used like font, but one may still change their color & size by setting the corresponding font properties. Check this post for more info.
I'm using opencart in farsi language and I decided to change the font of my website. First I tried to change the font style in "body" element in css. But unfortunately it didn't work. Everything was done carefully, I used "font-face", uploaded fonts and everything. But it didn't work and I did this in main css file.
* {
font-family: something;
}
After I did so, all of the pictures in the website have lost quality, and none of the icons are shown...
how can I fix it...?
Regards
Icons are not shown because you are overriding the font family.
Have a look at Glyphicons or Font-Awesome
http://fontawesome.io/
http://glyphicons.com/
They use a font to print the icons.
For the image quality I have no clue, try to restrict the range of your font override. Maybe it's a bug on the browser that gets angry if you set a font-familty to an img tag (I'm guessing)
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project.
Are there any way to do that?
I created a font in .ttf and .svg with my icons, and the result is fine, but any icon have a related letter. For example, the home icon is the letter "H" in the new font.
This method have a little issue in Firefox. In Firefox, before the icon is changed to home icon, you can see the letter "H".
What is the best practice to do that?
Is posible to solve the little issue in Firefox?
Thanks.
Preload the font. FF is using a fallback typeface until the requested face is available.
Why doesn't it happen with FontAwesome?
<i class="fa fa-something"></i>
generates text and only one face is specified for the generated text even when it's contained in an element with a style that does specify a fallback list.
I suggest you look at the CSS that accompanies FA.
You should try using a tool like Font Custom to generate your custom icon webfonts starting from your svg icons. FontCustom will generate the css and the font files and there are a lot of options that you can configure.
I'm a fan of Font Awesome I'm using lots of icons from there. But, now I need adding my custom image to font awesome file for using as icon. I want to add them to font icons files so that I can use their property like .fa-2x .fa-lg etc By researching on internet I found that I can convert my svg image to font using icomoon or font custom But, my confusion is after downloading files of my generating images as fonts how can I add those to font awesome files. I mean, there are already some files named
FontAwesome (Open Type Font File)
fontawesome-webfont.eot
fontawesome-webfont (SVG Document)
fontawesome-webfont (True Type Font File)
fontawesome-webfont.woff
Should I've to put anything on those files after downloading my custom generated fonts files? Or, should I've to put the CSS code from custom generated fonts files to fontawesome.css? if this, what CSS code should I put on there? I ain't experienced so much with this process. So, I'm confused with this. That's why, I can't tell everything arranged way. Sorry for this. Thanks
Best bet might be using a service like Fontello where you can "create" your own custom icon font and upload the custom icons there in addition to selecting the icons you need from Font Awesome.
I am trying to use font awesome icons in CSS3 as background. I already tried this CSS:
content:"<i class="fa fa-circle-o"></i>";font-family: FontAwesome
However, it's not working. I want to use font awesome and I don't know how. Please let me know.
I suggest you go back to the font awesome website and read up about it, look at some examples of how to use it.
http://fortawesome.github.io/Font-Awesome/examples/