Option for icon above inline title to be on same line as inline title

[redactedscribe]

Is your feature request related to a problem? Please describe. #190 made it possible for icons to be displayed near the title within a markdown document, but the positioning is above the title.

Describe the solution you'd like I think it would look nicer if the icon (an emoji in my case) would be inline with the inline title (which I have turned on).

Previously, I'd name a file <emoji><space><title> and the effect would be that what this FR is asking for.

This:

Over this:

Describe alternatives you've considered Some CSS hack possibly?

Thanks.

[redactedscribe]

This is possible using a CSS snippet:

.iconize-title-icon, .inline-title {
  display: inline-block !important;
}

.iconize-title-icon {
  padding-right: 0.2em !important;
}

Note: padding-right: 0.2em currently doesn't scale relatively because of #287, but should do so if it gets fixed. Else use .inline-title { padding-left: 0.2em !important; } instead.

Note: Only works in Reading mode, not Live Preview or Source mode. Maybe I can fix this. This is something to do with .iconize-title-icon and .inline-title being in a .mod-header div in Reading mode, but only .iconize-title-icon in .mod-header in Live Preview / Source mode. Something to do with .cm-sizer being a flex.

[oschrenk]

That would be great! I added the CSS snippet but realised it doesn't work in source mode as you said

[redactedscribe]

@oschrenk It's probably possible with better CSS. If you're not already heavily using Iconize, simply for emojis in titles and filenames etc, you can try Front Matter Title and define your icon via icon: front matter. This is what I now use.

[suxscribe]

Another snippet option:

  .iconize-title-icon {
    position: absolute;
    line-height: 2.5em;
  }

  .inline-title {
    margin-left: 30px;
  }

line-height and margin-left may need some adjusting based on your theme and font-size. Works in reading, editing and source mode

[FlorianWoelki]

This is now a native functionality in Iconize and has been available since the v2.12.0.