Login  Register

Non-inline icons

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

Non-inline icons

paranoiabla
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 :)
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: Non-inline icons

mojavelinux
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*^.^]
|===
a|
== icon:wrench[]

link:blah.html[Blah]

a|
== 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



--