How to use icons from ttf file - css

We have Lean Symbol ttf file. We want to use that in our application. We have added that one in our application but don't know how to use it. Like other i.e. glyphicons ttf we use class for accessing its icon representation etc. How I can do w/ this?
We have LeanSymbol.ttf file. When I open it by double click I get this one http://snag.gy/Rwi9Q.jpg
We want use these icon in our application but don't know how to access that icons.

Go to ForntSquirrel's web font generator.
Upload your font.
Download your kit.
The zip that you download has all the fonts in web format and gives you some great examples of how to use them.
You might want to consider using font awesome, which is awesome.
Bootstrap also includes Glyphicons as one of their components.

Use something like font squirrel to convert the font into a web font. You can then add the generated font-face css to your stylesheet.

Related

Which FontAwesome package do I need to download to use on my own server?

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

2sxc 11 Font icon picker Material Icons

I use 2sxc 11 and want to use the Material Icons.
I have the Woff, Woff2 and TTF files but I dont get the icons to pick.
My thought is that it doesn't work because Material does not work with unique classes but a string in the tag.
Is there a way to configure this so I can use the Font Icon Picker?
I don't see any issues - this should work IMHO.
An important detail to note: the icon-picker scans the CSS file for the classes it should provide/show, and this only works if the CSS file is loaded from the same domain. So the WOFF can be loaded externally, and the css for the page itself can also come from google etc. but for the icon picker to work, you need a css file on the same domain (usually in the same app).
That's a security limitation in js/css.

How to add custom css font icons in Oracle APEX 5

I have been surfing through the sites looking for a way to add my custom css font icons for my own application.
I have uploaded the css file in the workspace static files, and put the url in Shared Components\ Themes \ Icons \ Custom Library File URLs.
Please show my how to used my custom css font icons, for I don't want to upload images or so.
Depends on your version, but Maxime has an example here describing how to import Font APEX library for APEX 5.0
http://max-tremblay.blogspot.com.au/2017/02/using-font-apex-in-apex-50.html
You're chasing attributes in the theme settings.
Fonts like Wingdings render letters as a variety of symbols. If you look at some font websites likes dafont, you can see a lot of symbol fonts. Download the font file (ttf) and convert it to woff using some converter tool / websites like convertio. You may refer this stackoverflow question to get an idea about its usage in CSS.
Hope this helps.

Remove unused Font Awesome icons

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

How to determine the exact 'font-family' CSS value of an uploaded TrueType font?

I have just downloaded KlavikaBold font from the internet and I wish to use it on my website but uploading it on my hosting. I have included the font on the web page but how do I determine its font family and type so I can use it?
You can use something like FontSquirrel's amazing webfont generator to build a proper web font package with all the needed formats and style sheets. (Just uploading a TTF somewhere on the web won't do, it is much more complex than that.)
Note that not every font's license agreement allows for embedding as a web font.

Resources