Login  Register

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

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options Options
Embed post
Permalink
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

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

Emmanuel Bernard
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
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

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

LightGuardjp
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

Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

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

graphitefriction
Administrator
Hi Emmanuel!

Nope, that's not sacrilege :D

What you're trying to do should be possible, but there might be a bug/missing test. I'll look into it, too, and see what's going on or going wrong (and then make sure it gets documented).

-Sarah


On Sat, Jul 20, 2013 at 8:55 AM, LightGuardjp [via Asciidoctor :: Discussion] <[hidden email]> wrote:
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

Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

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

mojavelinux
Administrator
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

--
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

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

mojavelinux
Administrator
In reply to this post by graphitefriction
Btw, the icon macro would use Font Awesome if the icons attribute is set to "font". Otherwise, it would fall back to looking for icons using the same logic that's used to find the admonition icons....or just plain text if icons are not enabled at all.

-Dan


On Mon, Jul 29, 2013 at 7:56 PM, Dan Allen <[hidden email]> wrote:
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

--



--