How to add icon image to all certain text, css seems cant make it any workaround?

#1

I want to add “book” icon image to all the “read manual” text.

For example,

I write

I think you should (auto add a book icon here) read manual carefully.

How to make it?

Seems css can not make it, from this Stack Overflow post

Any work around?

#2

You could go the hard way and create a viewtemplate that parse the content of your tiddler with regex and insert icon at the right place, but that sounds very complicated … why not use wikitext ?

For example :

  • inline styling : e.g @@.book your text@@ is equivalent to <span class="book ">your text</span>. Then you can use css to display your icon.
  • use links : [[your text|book]]. The link generated will have the href #book, you can use this to style the text however you want.
  • use transclusion : {{book}}, where book is an image tiddler containing your book icon
2 Likes
#3

Oh you give a great advice thank you I will try

1 Like
#4

Sorry to bother you again.

I add the code to the global css. nothing changed, if I remove the before, just type in “.book”, an image will be added. But with “before” nothing happened.

.book::before{
  content: '';
  background: url(<<datauri "imgIMG">>);
  z-index: 2;
  width: 32px;
  height: 32px;
}

I check the style in dev tool seems work fine. But can’t see icon before the word 文档. Do you know why this happened?

image
image1863×802 274 KB

#5

Hi Ori

One very low-tech but low filesize alternative would be to use a utf-8 icon/emoji;

&#128214;

produces;

:open_book:

If you make a tiddler called ‘Book icon’ and tag it:

$:/tags/TextEditor/Snippet

Put this in the text: &#128214;

and this in the caption field: &#128214;

It will give you a book icon to add from the stamp tool in the editor toolbar as you type.

If you want to add it retrospectively throughout your wiki in front of specific text open the wiki in a text editor like Word and do a search and replace:

Search: Ori’s specific text

Replace with: &#128214;Ori’s specific text

Be careful that Ori’s specific text doesn’t match anything ‘system critical’ though.

It doesn’t answer your css problem but might produce a smaller headache.

Happy 2022!

2 Likes
#6

Probably best to do a backup of your wiki before trying a search/replace maneuver Ori!

#7

You forgot to use “display-block”, by default ::before and ::after are inline, therefore width and height are ignored. Use this :

.book::before{
	display:inline-block;
	content:"";
	vertical-align: middle;
	background: center/contain url(<<datauri "imgIMG">>);
	margin:.5ch;
	height:2ch;
	aspect-ratio:1;
}

Result

image

@Watt idea is great, using emoji will probably be more performant and work offline, however it will not look the same across all platforms. If this is not an issue for you then use this instead :

.book::before{
  content:"📖";
  margin:.5ch;
}

You can add a font size to change the size of the emoji.

Using a stamp and hardcoding the emoji in the tiddler is arguably easier to setup but using css allows you to change the image later if you wish. I suggest you follow the steps @Watt explained and use the wikitext @@.book @@ or a html tag like <i class=book/> for example.

2 Likes
#8

Ori (and others with a similar question),

Usually, when you want to draw attention to something using an icon, you will also have a link (to the manual, or whatever).

So, if you want to make an icon appear before that link, you might make use of this nice bit of code by Mat that allows you to put whatever you like before or after links (or to make particular links themselves stand out with a distinctive color or font, etc.):

http://linkstyle.tiddlyspot.com/

You can even apply distinctive formatting to all links for tiddlers with a certain tag, etc. This solution is in effect here: https://google-fonts.tiddlyhost.com/

If your tiddlywiki preferences are set to treat tiddler titles as links, then the tiddler title in question also draws with the icon, which creates a nice thematic recognizability across your site.

-Springer

1 Like