FontAwesome appearance

[Rustem]

I embedded FontAwesome into my TW5, but when I use it inside a button widget, the button looks big and darkly colored. How do I make it look uniform with the other buttons?

Here’s what I have so far, just put it in a new tiddler and tag it with “$:/tags/ViewToolbar”:
(I added a new journal button there just to see how it looks)

<$button
  class=<<tv-config-toolbar-class>>
>
  <$action-sendmessage
    $message="tm-new-tiddler"
    $param="BookmarkCreateTemplate"
    title="Bookmark"
    tags=<<currentTiddler>>
  />
  <i class="fa fa-bookmark"/>
  {{$:/core/images/new-journal-button}}
</$button>

​

[Jeremy Ruston]

Hi Rustem

Can you share it on TiddlySpot (or similar) to make it easier to investigate?

Many thanks,

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/22006e9b-b3b6-4c04-abef-56e513c74fd0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[Rustem]

Here it is: http://fa-button.tiddlyspot.com/

I actually managed to put together a stylesheet for it, but I'm wondering if there is a better way. Like maybe there is an existing class in TW5 that will make it look in line with the rest of the buttons? I tried a few, but none worked.

Disable the stylesheet to see how it looks "out of the box".

Thank you.

R.

[Jeremy Ruston]

Hi Rustem

It looks like Fontawesome glyphs have a bounding box that doesn't align with the baseline of surrounding text. Try pasting something like this into a tiddler:

Before: T<span class="fa fa-bookmark-o _ra_fa_button"></span>After

So, I think your CSS is probably the best we can do (albeit I didn't need the width declaration in my tests).

Best wishes

Jeremy.