Icon Fonts and eReaders

[Rand Brittain]

I've been working on converting a book to ePub that uses a set of eight colored icons to distinguish certain concepts it's trying to explain. Having had difficulties getting image files to line up right, I've been trying to use an icon font from IcoMoon to represent those eight icons in the ePub.

As far as Calibre's editor is concerned, and Sigil too, this works great! I was able to replace the bullet points with the icons using the :before element and get them to look right.

Unfortunately none of this shows up when I transfer the book to an eReader (either Kobo or Nook) and view the files there.

Does anybody have an idea of what I could do to get the icons visible to readers?

[Toxaris]

Without some code, it will be difficult...

[Doitsu]

******************

[Jellby]

Originally Posted by Rand Brittain

As far as Calibre's editor is concerned, and Sigil too, this works great! I was able to replace the bullet points with the icons using the :before element and get them to look right.

While the :before pseudo-element should be supported in ePub 2, the content attribute, as far as I know, is not, and you're probably using it. Calibre and Sigil are using standard HTML renderers for display, which support parts of CSS not required in ePub, but ebook readers are a different beast.

Since you say "replace the bullet", I guess you are using lists... Stay away from them if you require any special styling. Instead use an embedded font, an explicit character and hanging indent (or whatever).

[Rand Brittain]

Originally Posted by Jellby

While the :before pseudo-element should be supported in ePub 2, the content attribute, as far as I know, is not, and you're probably using it. Calibre and Sigil are using standard HTML renderers for display, which support parts of CSS not required in ePub, but ebook readers are a different beast.

Bluh, bluh, I am.

Working up bulleted lists where some bullets use standard bullets and some use a fancy icon is going to be a pain, then.

Is EPUB3 any better at this, not that it helps much in this situation?

[DaleDe]

Originally Posted by Rand Brittain

Bluh, bluh, I am.

Working up bulleted lists where some bullets use standard bullets and some use a fancy icon is going to be a pain, then.

Is EPUB3 any better at this, not that it helps much in this situation?

here is the support requirements for CSS in ePub 3 from our wiki EPub_3#CSS.

Dale

[Jellby]

Originally Posted by Rand Brittain

Working up bulleted lists where some bullets use standard bullets and some use a fancy icon is going to be a pain, then.

Standard bullets are just a particular character, which you can write as •, so it can be as simple as:

<div class="list">
<p><span class="standard_bullet">&bull;</span> First item.</p>
<p><span class="fancy_bullet">&bull;</span> Second (fancy) item.</p>
</div>

Where "standard_bullet" does nothing and "fancy_bullet" selects an embedded font, assuming your fancy icon is defined in the bullet glyph of the font. The class "list" would take care of the proper alignment and spacing within the list.

Or, if the whole list is going to use one bullet or the other:

<div class="standard_list">
<p><span class="bullet">&bull;</span> First item.</p>
<p><span class="bullet">&bull;</span> Second item.</p>
</div>

<div class="fancy_list">
<p><span class="bullet">&bull;</span> First (fancy) item.</p>
<p><span class="bullet">&bull;</span> Second (fancy) item.</p>
</div>

and you'd define different fonts for "div.standard_list span.bullet" and "div.fancy_list span.bullet".

[Rand Brittain]

Ah, that solution might actually be possible. Thanks!