Best way to put small icons inline with text?

Support Themes & Styling
1

I’m looking to achieve something similar to what you can see on this screenshot:

image
image.jpg876×163 57.4 KB

I made *.svg icons, I linked them with [DirectDamage]: /img/DirectDamage.svg?resize=16,16 "Direct Damage" at the bottom of the page, and tried inserting them with ![][DirectDamage], but the result is… Less than satisfactory.

I did find a topic about it, but the only answer that was there was “Gotta do it with HTML” basically. Thing is, I’d rather use some easier method, like :direct-damage: or something, instead of having to always copy and paste whole lines of html code.

So here I am, asking, if there’s some method of making it easy? Maybe somehow making a font of these icons and embedding it in Grav, similarly to how FontAwesome is embedded?

Ultimately something like adding ?display=inline to image link would be the best, but I’m not really up to that.

2

The easiest would be using ?class=inline-img, where you control the image through CSS - forcing its size, position, and behavior. The following CSS should get you started:

.inline-img {
  display: inline;
  margin: 0 0.125em;
  padding: 0;
  vertical-align: baseline;
}

You could further this by using shortcodes, allowing codes such as [DirectDamage], or :DirectDamage: if you prefer. This would basically entail a plugin using the ShortCode-library to parse a page’s content and replacing based on a simple list of codes to look up, enclosed by your preferred delimiter.

1 Like
3

The first method works like a charm and will do for now! Thank you very much!

4

I also would recommend creating a little shortcode plugin that lets you easily use any of the fontawesome icons

5

There already is an existing plugin for that, I’m using it, of course.

6

lol, i thought I wrote one already… Yes it’s in shortcode-core plugin :slight_smile: