Easily paste Font Awesome Icons inline in an existing text paragraph

[PeteSharp]

@JDW

You didn’t reply to my previous post, indicating I may have stumped you.

? What post? About the span in span? I’m not sitting here waiting for you to ask questions, its actually my day off

As far as I know, a span within a span is actually valid HTML5 (that would be the first question to ask) It is just at this stage the text bric’s do not support nested Spans as far as I can see.

You can add Font Awesome to a button or a link using CSS with what they call Pseudo Elements. Which right now would be the easiest solution for what you’re talking about. (CSS goes in the page header).

<style>
.myClass::after {
    font-family: 'FontAwesome';
    content: '\f004';
    position: relative;
    font-size: 90%;
    padding-left: 10px;
}
</style>

Name the class what ever you want and apply it to where you need it.

For example, the above CSS will do this to a button and a heading.

If you want the icon before the text use before instead of after in the CSS. (obviously change the left padding to right)

You need to use the Font Awesome Unicodes for the content in the CSS. You can find these on the Font Awesome Cheat sheet

[JDW]

@PeteSharp

You can add Font Awesome to a button or a link using CSS with what they call Pseudo Elements. Which right now would be the easiest solution for what you’re talking about. (CSS goes in the page header).

Thank you for the workaround solution. I call it “workaround” because it’s very fiddly and time consuming when you want to do this with multiple FontAwesome icons in numerous different places. But your excellent advice is very useful in a pinch. Thank you.

I still think @Norm can make all of this easier in Blocs so we won’t need to resort to code, yet we can add FontAwesome icons anywhere, fast and easy. That’s really the basis for my opening post.

Again, thank you for all your help on your day off!

[Pealco]

@StFoldex

And what is about other than Font Awesome fonts? What name symbol do I use then? (li for Lincons?)

You can use what ever icon you have in blocs, for that you can do as this:

1. In icon you want to use, right click and select, inspect element:
   

   

2. Check the class /classes it have:
   

   
   
   In this case you know you have to add “feather-icon” and “icon-paper-clip” to have the icon.

3. Check it:

And you can do that for any icon, from any type inside the icons available in Blocs.

• Feather Icons
• Font Awesome
• Ionicons
• Lincons
• ET Line Icons

Hope it helps you…

[StFoldex]

Simply wonderful Pealco!