For the Font Awesome 4 release, the classes changed from "icon-coffee" to a better namespaced "fa-coffee".
#Awesome font glyphs upgrade
So at one point I also wondered if it would be possible to upgrade Alloy's older Font Awesome 3.2.1 to the latest 4.3.0. Note that I'm not really selling FontIcons or anything, I'm just providing choice and affirmation that, should you need/want FontIcons, they'll work in your theme too. It just so happens that those, too, can be integrated into a theme in the same way we just added Font Awesome into a theme. What's more, FA has some other similar glyphs as fonts from. So it is possible to use the latest Font Awesome in your themes, leveraging all of the latest glyphs. When you publish the article and return to your portal, voila, you can see all of the available Font Awesome 4.3.0 glyphs! I went with a table because this is just to show that Font Awesome is working in the theme, it's not trying to show the best way to put a table into your journal articles. For the body of the article, click on the "Source" button and then grab the HTML fragment from the attached file (there's over 500 glyphs so I didn't want to put all of that content here into the blog) and past it in.Īnd before you say anything, yes I know it's a table and we don't do those anymore because they are not responsive. Publish the article to see your FA Coffee Cup:ĭrop another Web Content Display portlet on the page and create a new article. For the body of the article, click the "Source" button and set it to the following: Create a new page in your portal somewhere (doesn't matter where) and use your new theme for the page and, to keep things really simple, use a 1 column layout.ĭrop a Web Content Display portlet on the page and create a new web content article. Build and deploy it to prepare for the next step. Once you've tested your theme out, you might want to switch over to, but Liferay will already be minimizing the css on the fly so this is not really necessary.Īt this point your theme project is done. Edit this file to add the font-awesome.css line to the end of the url(font-awesome.css) To keep the theme changes as simple as possible, copy the css/main.css from the _styled theme into your new theme's css folder. If using the SDK, you'll copy them to the docroot/_diffs folder. If using Maven, you'll copy them to the src/main/webapp directory of your font. To keep the theme simple, use classic as the parent for the theme.ĭownload and expand the latest version of Font Awesome I'm using 4.3.0.įrom your Font Awesome directory (mine is font-awesome-4.3.0), copy the css and fonts folder to your theme. Start by creating a new theme project for Liferay 6.2. But I do want to know if I need it if I can use it or not. I really doubt I'll ever have a need for the new viacoin glyph, for example. Now I can't really comment on how useful the 519 glyphs are.
At this point in time it is two years old and, although it still works, the set of available glyphs (361 of them) is smaller than the current 4.3.0's 519 glyphs. In Liferay 6.2 they added Font Awesome 3.2.1 into the mix.
#Awesome font glyphs plus
It's awesome in that SVG images scale to practically any size yet still keep nice curves and won't pixelate on you.īy using Font Awesome, you get a catalog of canned images for all kinds of standard buttons that you see on a desktop application or on a web page plus a long list of others. Font Awesomeįor those that don't know, Font Awesome is basically a custom font made from SVG images.
So I wondered if it was possible to use the current Font Awesome in a theme and started down a path to test it out. In my last blog post I had a little rant about the old version of Font Awesome included with Liferay 6.2 and how it would always be out of date because they seem to keep adding new glyphs every day. If you want to use icon-file from fontawesome Than just disable it in bootstrap.css. įirst step is to include fontawesome css file into the head section after the bootstrap.css file,example: And those icons which you want to use from fontawesome disable them in glyphicons. Suppose You want to use Glyphicons icon-screenshot than disable it in fontawesome. Important* to use both glyphicons and fontawesome you will have to disable icons with same name.
0 kommentar(er)
