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

If Dan is watching the list I'm sure he'll have a good solution, but I'll take a look too. 

—
Sent from Mailbox for iPhone

On Fri, Jul 19, 2013 at 1:16 PM, Emmanuel Bernard [via Asciidoctor :: Discussion] <[hidden email]> wrote:

I know this is somewhat sacrilege but I am looking for a way to integrate font-awesome icons into an asciidoc document that is the template for an html page (generated by Awestruct).

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

I tried to use the ability to attach roles to text

[source, asciidoc]
----
= [icon-camera-retro]#sometext# Nice camera
----

It works but also displays some text after the icon. Trying to replace it with nothing or with an empty space did result in a parser misinterpretation.

Do you have a solution to this challenge?

Emmanuel

---

If you reply to this email, your message will be added to the discussion below:

http://discuss.asciidoctor.org/Asciidoc-template-based-site-awestruct-and-font-awesome-tp383.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]

To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

---

If you reply to this email, your message will be added to the discussion below:

http://discuss.asciidoctor.org/Asciidoc-template-based-site-awestruct-and-font-awesome-tp383p384.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

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

--

Dan Allen | http://google.com/profiles/dan.j.allen