You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 25-04-2013 17:23:02

LucaKling
Contributors
From: Germany, near Frankfurt/Main
Registered: 22-04-2013
Posts: 2
Website

Font Awesome Icons

Hey,

for pages I am managing and designing I use Font Awesome Icons (http://fortawesome.github.io/Font-Awesome/).
The awesome thing about them is, that you can scale them infinite because they are SVGs.
Would be nice if you would take a look at it and use them in your next version instead of those PNGs.

I just added the font and here's the result:
PNGs:
before.jpg
SVGs (Font Awesome Icons):
after.jpg

The quality of the SVGs is much better. smile

Best Regards
Luca Kling

Last edited by LucaKling (25-04-2013 20:35:13)

Offline

#2 03-05-2013 22:18:09

steebchen
Contributors
From: Germany
Registered: 03-05-2013
Posts: 121

Re: Font Awesome Icons

This is really awesome, thank you very much. <3

Offline

#3 03-05-2013 23:33:21

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Font Awesome Icons

Thanks for sharing smile

Offline

#4 03-05-2013 23:44:06

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Font Awesome Icons

Great!

Free of charge even for commercial use!

- Pie

Offline

#5 10-05-2013 13:32:03

NutterzUK
Contributors
Registered: 10-05-2013
Posts: 9

Re: Font Awesome Icons

Thanks Luka! This looks fantastic, but I'm having problems getting them to be the same size as the others. Can you let us know what you changed to get this working?

Thanks,
Steve

Last edited by NutterzUK (10-05-2013 13:32:13)

Offline

#6 14-06-2013 12:37:23

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Font Awesome Icons

Hi,

yeah thanks for sharing indeed!

NutterzUK wrote:

Thanks Luka! This looks fantastic, but I'm having problems getting them to be the same size as the others. Can you let us know what you changed to get this working?

Thanks,
Steve

Steve, you can apply any style you want.
If you use it for the main navigation for example, just use something like this:

<a rel="group0">
	<i style="font-size:32px; padding: 20px;" class="icon-home"></i>
	START
</a>

You can put the style in one of your css files as well, in that case just give it an id and define the style in the desired css file.

hope that helps

- Pie

Offline

#7 11-11-2013 20:22:16

Liam
Contributors
Registered: 11-06-2013
Posts: 5

Re: Font Awesome Icons

Hi All,

Probably doing something super silly, but I have installed the Font-Awesome directories to the server, referenced the stylesheet in the head section of the index page

<link rel="stylesheet" href="css/font-awesome.min.css">


and used the <i> references,


<i class="fa fa-camera-retro"></i>

and cannot seem to get any icons to show. Is there anything more that I should be doing?

Cheers :-)

Offline

#8 11-11-2013 20:47:18

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Font Awesome Icons

Simplest code that uses font-awesome.min.css as you wanted, tested minute ago, works in all possible browsers:

<html>
<head>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-camera-retro"></i>
</body>
</body>

Maybe check path to stylesheet because everything should work smile.

PS. Here you can find template using those fonts: link

Last edited by chrismaliszewski (11-11-2013 20:51:24)

Offline

#9 11-11-2013 20:58:47

Liam
Contributors
Registered: 11-06-2013
Posts: 5

Re: Font Awesome Icons

That's why I feel like such an idiot!!! LOLOL

I have put the stylesheet ref in the beginning of the index page and  tried to use the <i> links in  several places of my subpages  (the pages created in the \pages subdirectory...) and I see no icons...

As you have suggested, I will go back and check to ensure that I have not missed any files or references anywhere, but I have to say I feel kinda silly smile

Cheers for your help and quick reply. Any suggestions gratefully received  smile

Liam

Offline

#10 11-11-2013 21:09:47

Liam
Contributors
Registered: 11-06-2013
Posts: 5

Re: Font Awesome Icons

so for example in the Metro UI index page:

/* FILES*/
$cssFiles = array( /* Add your css files to this array */
    'css/layout.css',
    'css/nav.css',
    'css/tiles.css',
    'themes/'.$theme.'/theme.css',   
    'css/font-awesome.min.css',
);



and for example in same page

<div id="headerTitles">
  <h1><a href="<?php if($bot){echo "index.php";}?>#!"><?php echo $siteName?></a></h1>
  <h2><?php echo $siteDesc;?><i class="fa fa-camera-retro"></i></h2>
</div>


NO icon sad lolololol

Offline

#11 11-11-2013 21:20:32

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Font Awesome Icons

I checked those fonts with Metro Template.

Did you copied all files and catalogues from font-awesome-4.0.3 catalogue to main direction of page? I did that and after adding css/font-awesome.min.css to $cssFiles array I used <i> the same as yours in pages, in footer and in main-nav and everything worked neutral.

Can you send address to your website and show us how does your page look like so it'll be easier to find where the problem is?

Last edited by chrismaliszewski (11-11-2013 21:23:18)

Offline

#12 11-11-2013 21:55:01

Liam
Contributors
Registered: 11-06-2013
Posts: 5

Re: Font Awesome Icons

ops  ops  ops

I had called the subdirectory on the webserver "\font" instead of "\fonts". Changed it and all worked as it should!

I shall now take my red face and obviously defective contact lenses (Yes, I'm blaming the lenses lol... smile ) and return to work.

Thank you SO much for your time and patience smile Maybe next time I can come up with a REAL problem...

Cheers,

Liam

Offline

Board footer

Powered by FluxBB