Login  Register

Re: Asciidoc, template based site (awestruct) and font-awesome

Posted by mojavelinux on Jul 30, 2013; 1:56am
URL: https://discuss.asciidoctor.org/Asciidoc-template-based-site-awestruct-and-font-awesome-tp383p412.html

On Sat, Jul 20, 2013 at 3:38 PM, graphitefriction [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi Emmanuel!

Nope, that's not sacrilege :D

Agreed. In fact, I think you stated it perfectly when describing Font Awesome itself:

"Font Awesome is used in HTML ... replaced by a nice icon. Think of it conceptually as an image, except it uses font and unicode."

It is indeed an image (sort of like an SVG image). That means the intent is to make an image and thus it should be marked up in AsciiDoc as such.

Currently, this is possible using syntax which perhaps is sacrilege:

```
[icon-book]'{empty}'
```

That produces the following HTML:

```
<em class="icon-book"></em>
```

(The choice of the emphasis tag is arbitrary...any wrapper tag would work here).

You can see it in action on the blog post we did for the OSCON workshop: http://asciidoctor.org/news/2013/07/16/oscon-2013-docs-workshop-preview/#reading-list

For it to work, your example should be written as:

```
[icon-camera-retro]'{empty}' Nice camera
```

You could also alias empty to a shorter attribute, such as an underscore:

```
:_: {empty}

[icon-camera-retro]'{_}' Nice camera
```

This is all very ugly though since it doesn't communicate the intent of the writer. The intent is to make an image (specifically an icon image). We should be using an inline macro instead.

Here are a few possibilities:

- image:icon-camera-retro[]
- icon:camera-retro[]
- image:camera-retro[type="icon"]

I'll file an issue in Asciidoctor so that we can track this.

Btw, to make your documents portable today, you can define your icons in attributes, then just update the values once we have the macro implemented.

```
:icon-camera-retro: pass:quotes,attributes[[icon-camera-retro]'{empty}']

{icon-camera-retro} Nice camera
```

-Dan

--