I’m looking to achieve something similar to what you can see on this screenshot:
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
, 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.
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:
margin: 0 0.125em;
You could further this by using shortcodes, allowing codes such as
: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.
The first method works like a charm and will do for now! Thank you very much!
I also would recommend creating a little shortcode plugin that lets you easily use any of the fontawesome icons
There already is an existing plugin for that, I’m using it, of course.
lol, i thought I wrote one already… Yes it’s in shortcode-core plugin