Search…

X3 Photo Gallery Support Forums

Search…

Font Awesome list7 posts

Post Reply
 
User avatar
EHRETic
Experienced
Topic Author
Posts: 116
Joined: 02 Feb 2011, 16:26

Font Awesome list

13 Jun 2016, 09:55

Hello there,

I've tried to create a list with Font Awesome icons, but apparently, as soon as I use the icons in a list, there is "not so pretty" pixel shift in the text. The text seems to be shifted down with a couple of pixels.

Any chance to fix this ? Maybe I'm not using the right code.

Result : http://www.ehretic.com/6prestationstest/

Code used :
Code 
<ul class="fa-ul">
<li><i class='fa-li fa fa-check-square-o' style='color:yellowgreen;'></i>Text 1</li>
<li><i class='fa-li fa fa-check-square-o' style='color:yellowgreen;'></i>Text 2</li>
</ul>
Top
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13997
Joined: 30 Sep 2006, 03:37

Re: Font Awesome list

13 Jun 2016, 11:45

I did some research on the styles, and this is just how it is ... In the example page on font-awesome, it may look better simply because they have adjusted everything to their font/size/style.
Image

You can "fix" it by adding some custom CSS, although I'm not sure it's bulletproof:
Code 
.fa-li {
  top: .3em;
}
Image
Scales with font:
Image
Top
 
User avatar
EHRETic
Experienced
Topic Author
Posts: 116
Joined: 02 Feb 2011, 16:26

Re: Font Awesome list

14 Jun 2016, 05:16

Many thanks Karl, it does work ! :wink:

(and hopefully it will stay like that for a while :mrgreen:)
Top
 
winph
Experienced
Posts: 236
Joined: 19 Jul 2008, 05:07

Re: Font Awesome list

27 Aug 2016, 00:36

can i use FontAwesome in Menu or title?
Top
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13997
Joined: 30 Sep 2006, 03:37

Re: Font Awesome list

27 Aug 2016, 01:13

winph wrote:can i use FontAwesome in Menu or title?
In title yes.

In menu (label), currently no. I will fix this for a release coming within two weeks.
Top
 
winph
Experienced
Posts: 236
Joined: 19 Jul 2008, 05:07

Re: Font Awesome list

27 Aug 2016, 02:15

mjau-mjau wrote:
winph wrote:can i use FontAwesome in Menu or title?
In title yes.

In menu (label), currently no. I will fix this for a release coming within two weeks.
I added this to the title but it doesnt show up in the menu (main and submenu)
<i class="fa fa-bookmark-o"></i> Foods
Top
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13997
Joined: 30 Sep 2006, 03:37

Re: Font Awesome list

27 Aug 2016, 02:30

winph wrote:I added this to the title but it doesnt show up in the menu (main and submenu)
<i class="fa fa-bookmark-o"></i> Foods
That's because title is not used for the menu. Menu uses label, and defaults to slug (folder name "slugified") if label is not set. This is because titles are generally too long to be used in the menu. If you want label to be the same as title, you must explicitly set it from the label input.

BUT, as mentioned, labels do not support html tags, because it may break the menu when certain html tags are used. It is safe to use html in titles and descriptions, because these are page-elements that can't really break anything.

HOWEVER, I will be adding support for some html tags (including <i> for icons) for labels in next release, which will be available within 2 weeks. You'll have to wait :expressionless: ...
Top
Post Reply