Page Control Button misalignment issue

#1

I have the below page control button to create a new tiddler with specific template text and tags (adapted from https://groups.google.com/g/tiddlywiki/c/IqDGCE1d594/m/SRf3dKg6BAAJ)

\whitespace trim
<$button class=<<tv-config-toolbar-class>> tooltip="Add movie review">
   <$list filter="[<tv-config-toolbar-icons>match[yes]]">
    <span class="chunk fas fa-film"/>
   </$list>
   <$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text">
<$text text="New Movie Review"/>
</span>
   </$list>
   <$action-sendmessage $message="tm-new-tiddler" title="Movie Name («year»)" tags="movie review" text="""! <$view field=title/>

!! Favourite Scene
«description»

""" tiddly="https://www.imdb.com/title/tt«id»/"/>
</$button>

where

<span class="chunk fas fa-film"/>

Is referencing an icon using Font Awesome — using Font Awesome with TiddlyWiki 5 's FontAwesome plugin. This works okay for me but I have 1 minor issue with the above implementation:

  1. The film icon is slightly mis-aligned:
    On the Page Control Toolbar:
    image
    Similarly on the Menu:
    image

I understand from https://tiddlywiki.com/static/Creating%20new%20toolbar%20buttons.html that the icon should be 22px by 22px. How do I implement scaling in the above so that the icon appears aligned with the rest?

<span class="chunk fas fa-film" style="width:22px; height:22px"/>

doesn’t seem to have any effect.

1 Like
#2

I believe @EricShulman knows the answer to this but I could not find a previous answer when I searched for it.

#3

Try this:

<span class="chunk fas fa-film" style="vertical-align:middle;"/>
#4

@EricShulman , @TW_Tones Thanks, that worked:

Before:
image
image

After
image
image

I’ll pretend not to see $:/core/ui/Buttons/import is slightly misaligned too…

#5

Try this in a tiddler tagged with $:/tags/Stylesheet:

.tc-page-controls button { vertical-align:middle; }
#6

While we’re on a roll,

  1. I can’t help but notice my new icon looked darker than the rest…
    image

  2. Any suggestion for to align the import icon on the menu bar too?
    image

#7

Try this:

.tc-page-controls .fa-film { opacity:0.5; }
.tc-page-controls .fa-film:hover { opacity:1; }

Try this:

.tc-menubar-item > button { vertical-align:middle; }
#8

The paperclip is quite recalcitrant.

Without .tc-menubar-item > button { vertical-align:middle; }:
image

With .tc-menubar-item > button { vertical-align:middle; }:
image

But it is okay, I can live with minor imperfections.

@EricShulman , thanks again!