Using Font Awesome as small icon replacement

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Using Font Awesome as small icon replacement

Post by MarkT2 »

Font Awesome provides a number of potentially useful images as font items.

Eg. <i class="icon-question-sign"></i> in overall header gives:
Font awesome icon-question-sign
Font awesome icon-question-sign
Screen Shot 2013-02-03 at 09.53.02.jpg (8.63 KiB) Viewed 9281 times
instead of the
standard icon-faq
standard icon-faq
Screen Shot 2013-02-03 at 09.54.27.jpg (8.69 KiB) Viewed 9281 times
.

Enlarged to show the difference.

To install Font Awesome you can create a folder at the root of the forum called "font-awesome", with a font folder and css folder within.

and in overall_header insert:

Code: Select all

<link rel="stylesheet" href="{ROOT_PATH}font-awesome/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="{ROOT_PATH}font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
with font-awesome-ie7.min.css supporting IE7, if you want/need it.

The only problems so far are that some of the phpbb icon class names conflict with the font awesome names, so you can edit names in the font-awesome.min.css files and use the edited names in the <i> tags. The only other problem that I can see is that to display properly on webkit browsers font-awesome automatically uses -webkit-font-smoothing: antialiased; which if applied to the following text makes it go thin and difficult to read.

I haven't tried it on Windows browsers yet, but so far the benefits look good (icons that scale well, and reduce http requests), and any problems look easy to overcome.
Last edited by MarkT2 on Mon Feb 04, 2013 8:34 am, edited 1 time in total.
Because Style Matters!
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

Getting rid of those scrappy little icons is very satisfying. It would be nice to see the phpbb styles development team embrace font icon replacement, or at least to have a mod to update existing installs of phpbb. It is possible to design your own icons and submit them to Font Awesome for inclusion in the font set. For those with the technical know how, and graphical ability, it should be possible to create a font icon replacement set specially for phpbb.

To avoid font smoothing you just change e.g.. <li class="icon-ucp"> to <li><i class="icon-user"></i>, to avoid any text being subjected to the font icon class.
Because Style Matters!
User avatar
PlanetStyles.net
Former Team Member
Posts: 4703
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Using Font Awesome as small icon replacement

Post by PlanetStyles.net »

Interestingly I'm developing a mobile style which uses the 'Web Symbols Liga' font for pretty much every image. Exactly the same concept as you're using to replace prosilver icons.

It seems extremely unlikely that replacing the default icons with this solution will happen in the 3.1 development cycle, but it could possibly be looked at for 3.2 . It's definitely the way forwards in the 21st century internet.

I suggest registering yourself an account over at Area51 and starting up a topic recommending font icon replacement here: https://area51.phpbb.com/phpBB/viewforum.php?f=108
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

Thanks Christian, I think it has to be the way to go. I'll sign up on Area 51 as you suggest, there's room for a mod if anyone is interested in doing one, or a Knowledge Base article for diy. I don't know if there are better alternatives to Font Awesome, but it has quite a few font icons that are similar to the standard gifs in the header and footer navbars. If it ever 'catches on' then mod writers could include alternative font replacements in their contrib folders.
Because Style Matters!
User avatar
PlanetStyles.net
Former Team Member
Posts: 4703
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Using Font Awesome as small icon replacement

Post by PlanetStyles.net »

MarkT2 wrote:there's room for a mod if anyone is interested in doing one, or a Knowledge Base article for diy.
I'll probably publish an article to my personal site for the benefit of others at some point tonight or tomorrow. :)
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

I'm coming to the conclusion that icoMoon may be a better solution, as it allows a much greater choice of icons, 1800+, allows the creation and saving of custom icon sets, allows the important of your own icons (as svg files), provides basic icon editing tools, creates png's and sprites if you want, as well.

This video gives a good overview of using the icoMoon app: http://www.youtube.com/watch?v=v8xxtFmuH5w

Just to give an idea of the differences that font replacement can make:
With existing phpbb gifs - note the white edge pixels
With existing phpbb gifs - note the white edge pixels
without_font_icons.jpg (35.65 KiB) Viewed 9209 times
With font replacement:
blue &quot;headerbar&quot; with font icons
blue "headerbar" with font icons
with font icons.jpg (41.94 KiB) Viewed 9209 times
blue &quot;footerbar&quot; with font icons
blue "footerbar" with font icons
with_font_icons2.jpg (25.69 KiB) Viewed 9209 times
And some custom bbcode to demonstrate how the font icons scale with text, a big advantages for high resolution screens (which make gifs look scrappy):
Normal size
Normal size
normal_size.jpg (17.05 KiB) Viewed 9209 times
larger size
larger size
larger_size.jpg (18.19 KiB) Viewed 9209 times
Larger size again
Larger size again
larger_size_again.jpg (19.94 KiB) Viewed 9209 times
The html replacement for this BBCode was really easy:

<p class="alert blue"><i class="icon-info-sign"></i> {TEXT}</p>

css:

Code: Select all

.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
border: 1px solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.blue {
    background-color: #e5f4ff;
    border-color: #a7cee2;
    color: #004b90;
}

Because Style Matters!
User avatar
PlanetStyles.net
Former Team Member
Posts: 4703
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Using Font Awesome as small icon replacement

Post by PlanetStyles.net »

MarkT2 wrote:big advantages for high resolution screens (which make gifs look scrappy):
This was really the selling point for me when committing to icon font replacement. Perfect sharp edges and clarity at any size, especially on pinch/zoom devices.

I still never got around to writing a tutorial out, need to brush up my site first. :lol:
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

Christian, I look forwards to the tutorial. Great site btw, I have implemented some of your tips, and your collapsible categories with cookies is very neat, and increasingly popular and can be made to work with many mods.
Because Style Matters!
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

These links are not that well highlighted on the Font Awesome site:

To subset just the icons you need: http://www.icnfnt.com/#/ (creates an html reference page as well of your subset). Be aware the file naming is slightly different, and minified versions are not produced, so you can do that yourself.

Also a full reference page with content values: http://fortawesome.github.com/Font-Awesome/design.html

Content values can be useful for replacement of icons that are background images. A summary of the technique you can use is here: http://astronautweb.co/snippet/font-awesome/

The only problem with this method is that css from many style sheets can cause strange things to happen, so you have to be quite careful with the css when you use this technique to replace other small icons, and you may have to edit two (or three) css files.

To avoid conflicting with the phpbb icon classes I renamed the chosen icons by prepending aw to the name after icon, in the ie7 and standard css files, in all of them, for consistency.

So icon-question-sign becomes icon-awquestion-sign etc.

Usage: <i class="icon-awquestion-sign"></i>
Because Style Matters!
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

Ignore the last advice on renaming, best just to use the names as they come and sort out any matching names by deleting them from the phpBB css files. I'm sticking with Font Awesome for the moment, because of the quality of the icons and the ease of use.

There is a great addition that could start to bring phpBB into the twenty-first century which are the following buttons that combine nice css with default font icons and Font Awesome icons. You can chose the ones you prefer.

The css seems to have some small adjustments for different browsers. Copy and paste from the following page worked pretty much immediately.

The results are impressive:

Image

All these buttons worked straight off without needing Font Awesome (coming out at pretty much standard button sizes for phpBB).

I found that the effect was nice, because the inherited hover picks up the board hover colour to turn the text including icon red, and a nice push state.

The only lines I needed to change were to change .button to something else to avoid conflicting with the default buttons, to add !important to text-decoration:none.

I found that adding the following to each class of button font-family: FontAwesome; centered the font icons much better and obviously allows the full range of content values to display the FontAwesome fonts. Works on all modern browsers. IE7 can't cope with the :before pseudo-element so just displays the button text, but degrades nicely, as they say.

Code: Select all

.star:before
{
	content: "\2605";
	font-family: FontAwesome;
}

.spark:before
{
	content: "\2737";
	font-family: FontAwesome;
}

.play:before
{
	content: "\f04b";
	font-family: FontAwesome;
} 
The play button is using a FontAwesome icon, the others not. Screen grab from a test page running on my forum, doesn't do justice to hover and push:
Nice to get away from scrappy little gifs.
Nice to get away from scrappy little gifs.
Screen Shot 2013-02-28 at 19.52.23.jpg (27.23 KiB) Viewed 9060 times
Last edited by MarkT2 on Thu Feb 28, 2013 8:05 pm, edited 1 time in total.
Because Style Matters!
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

Oops, left out the link:

Just some other awesome CSS3 buttons

More examples showing how well the buttons scale, this is an issue nowadays with pinch to zoom devices that people are using in the real world.

Image
Because Style Matters!
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

I'm working on the previous button set to give a similar result across all browsers for a range of button sizes and colours. In the meantime I have adapted a search box from this page: http://webdesignerwall.com/tutorials/be ... earch-form to square it off and use my own styled Go button instead of theirs.
Viewtopic Search Box
Viewtopic Search Box
Screen Shot 2013-03-08 at 16.46.29.jpg (12.73 KiB) Viewed 8998 times
Viewtopic Search Box - having clicked in it
Viewtopic Search Box - having clicked in it
Screen Shot 2013-03-08 at 16.25.53.jpg (11.38 KiB) Viewed 8998 times
I put the following css at the end of the forms.css file:

Code: Select all

/* search form 
-------------------------------------- */
.searchform {
	display: inline-block;
	zoom: 1; /* ie7 hack for display:inline-block */
	*display: inline;
	border: solid 1px #d2d2d2;
	padding: 3px 5px;
	-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	box-shadow: 0 1px 0px rgba(0,0,0,.1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #f1f1f1;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}

.searchform .searchfield {
	background: #fff;
	width: 202px;
	border: solid 1px #bcbbbb;
	outline: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
and changed searchbox in viewtopic.html to this:

Code: Select all

	<!-- IF S_DISPLAY_SEARCHBOX -->
	<div class="search-box">
	<form class="searchform" method="post" id="topic-search" action="{S_SEARCHBOX_ACTION}">
	<fieldset>
	<input class="searchfield inputbox search" type="text" name="keywords" id="search_keywords" size="20" value="{L_SEARCH_TOPIC}" onclick="if(this.value=='{LA_SEARCH_TOPIC}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_TOPIC}';" />
	<input class="btn bmed" type="submit" value="Go">
	<input type="hidden" value="{TOPIC_ID}" name="t" />
	<input type="hidden" value="msgonly" name="sf" />
	</fieldset>
	</form>
	</div>
	<!-- ENDIF -->
introducing searchfield class from the new css and using the buttons I created earlier in this line: <input class="btn bmed" type="submit" value="Go"> with btn the button class and bmed the button size class. You may need to play around with the margins to get it aligned.

I'll do my full version of the button css later with sizes and colours to chose from.
Because Style Matters!
MarkT2
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 8:42 pm
Location: London
Contact:

Re: Using Font Awesome as small icon replacement

Post by MarkT2 »

To continue my 'Blog' :D,

and going a bit off topic (but as the topic starter, I have that right), (more into the realms of CSS3).

I have found a great CSS Gradient Colour Generator: Ultimate CSS Gradient Generator which should help me do a range of colours for my button set.
Because Style Matters!
corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Using Font Awesome as small icon replacement

Post by corleoner »

Edited, I solved.
Locked

Return to “[3.0.x] Styles Support & Discussion”