Easily paste Font Awesome Icons inline in an existing text paragraph

Wish List
21

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

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.

29%20PM

52%20PM

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

1 Like
22

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! :slight_smile:

23

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:

    image
    image956×624 85.6 KB

  2. Check the class /classes it have:

    image
    image1164×108 21.8 KB

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

  3. Check it:

image
image1554×382 46.5 KB

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…

3 Likes
24

Simply wonderful Pealco! :+1:

25

Such a wonderful solution for older versions of Blocs! But alas, it no longer exists in Blocs 5. I wanted to add a new comment to this thread to mention that unfortunate change. I tested it just now in Blocs 5.2.4. Right-clicking any Font Awesome icon inside the Icon Font Manager dialog does nothing. :cry:

26

Thanks good for a work around but I see so much “oh just insert this code” in an app that is specifically sold as a drag and drop solution.

Styling an icon within a button or paragraph or text heading should be available in the class properties dialogue box.

TOO much of Blocs advanced styling is buried in obscure classes that you have to KNOW to add them to your class list even though the elements you just dropped into your page is actually using them. This should not be. If I drag an element or component on to my page and it’s using a class, that class should be automatically added to my project’s class list. I shouldn’t have to go looking for it buried in the class manager.

1 Like