Asciidoctor :: Discussion

Non-inline icons

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

2 messages Options

paranoiabla

Non-inline icons

Hi guys,

i was just wondering: in the documentation it says that fontawesome icons can be admonition and inline. I'm trying to build something like this: https://spring.io/projects where you have a table and inside you have large font-awesome icons with some text. So i cannot use admonition, but if I use inline icons like this:

|===
|icon:wrench[size=12x] link:blah.html[Blah]|icon:globe[size=12px] link:new/index.html[New]
|===

then the icons appear to be wrapped in a so the text stays on the same line. Also it seems like it cannot render icons bigger than 4x. Is there any way to use those font-awesome icons but to be wrapped in a div instead? And is it possible to make them larger than 4x?

Thank you :)

mojavelinux

Re: Non-inline icons

Administrator

There are (at least) two ways to solve this using the built-in behavior.

You can force an endline after the icon using a trailing " +", like so:

[source,asciidoc]

----

[cols=2*^.^]

|===

|icon:wrench[size=12x] +

link:blah.html[Blah]

|icon:globe[size=12x] +

link:new/index.html[New]

|===

----

Alternatively, you can make the cell an AsciiDoc cell and make the icon a section heading:

[source,asciidoc]

----

[cols=2*^.^]

|===

== icon:wrench[]

link:blah.html[Blah]

== icon:globe[]

link:new/index.html[New]

|===

----

Your icon can have any size it wants, so long as you provide the CSS necessary to make it happen. You can add additional CSS using a docinfo file:

.docinfo.html

[source,html]

----

<style>

.fa-12x {
font-size: 12em;

}

</style>

----

or you can just use a custom stylesheet and include this rule.

I want to warn you though, that you are running up against the pitfall of putting too much formatting and layout in the AsciiDoc. It's much better to think about what is content on that page and what is presentation. You can then feed the content through a customized HTML5 backend to produce exactly the HTML that you want for display purposes.

For instance, in your example, I see that table as a description list, with the icons being selected by the id given to each item. Something like:

[source,asciidoc]

----

[[spring-io]] Spring IO Platform::

Provides a cohesive, versioned platform for building modern applications. It is a modular, enterprise-grade distribution that delivers a curated set of dependencies.

----

You might even get more milage out of sections with custom styles or roles:

[source,asciidoc]

----

[#spring-io]

== Spring IO Platform

[.desc]

Provides a cohesive, versioned platform for building modern applications. It is a modular, enterprise-grade distribution that delivers a curated set of dependencies.

[#spring-boot]

== Spring Boot

[.desc]

Takes an opinionated view of building Spring applications and gets you up and running as quickly as possible.

----

Think of the AsciiDoc as a writer-friendly data structure. You can always convert it in whatever way you want...and you will need to convert it in multiple ways.

Cheers,

-Dan

On Thu, Aug 21, 2014 at 9:05 AM, paranoiabla [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Hi guys,

i was just wondering: in the documentation it says that fontawesome icons can be admonition and inline. I'm trying to build something like this: https://spring.io/projects where you have a table and inside you have large font-awesome icons with some text. So i cannot use admonition, but if I use inline icons like this:

|===
|icon:wrench[size=12x] link:blah.html[Blah]|icon:globe[size=12px] link:new/index.html[New]
|===

then the icons appear to be wrapped in a so the text stays on the same line. Also it seems like it cannot render icons bigger than 4x. Is there any way to use those font-awesome icons but to be wrapped in a div instead? And is it possible to make them larger than 4x?

Thank you :)

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Non-inline-icons-tp2039.html

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

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