Easily paste Font Awesome Icons inline in an existing text paragraph

The lack of this key functionality has driven me to such madness that I have finally made the time to create this Wish.

I want to EASILY add Font Awesome (and similar) icons inline with existing paragraph text in Blocs without fiddling with Inline SVG or HTML Widgets as they exist now. Sure, I could painstakingly recreate existing text inside an HTML Widget to get around the problem, but that’s ridiculous because we all have a lot of existing web content we simply don’t have time to rebuild, yet we want to add some icons inline inside it. Inline SVG is hardly inline and it’s fiddly and bothersome to use.

Let’s be honest. I want the ability to copy/paste a Font Awesome icon as easily as I can with Unicode Emoji. But I can’t. Yes, yes, I know Font Awesome is a collection of graphics, but I still want to add them to existing text more easily.

Hence, unless somebody else can propose something even easier, I propose that @Norm give us the ability to add a tiny HTML Widget inside an existing paragraph of text. I should be able to open any Blocs document, insert my text cursor inside a paragraph of text, and add this special HTML Widget which would then allow me to add code for the Font Awesome icon of my choice. That icon would then appear right where my text cursor is in that paragraph. I would not need to rebuild that paragraph inside an HTML widget. No! I would be a tiny HTML widget inside the text paragraph!

It would be even better if I could graphically choose the icon rather than resort to typing the icon’s code into a special HTML widget, but I will leave that to Norm to decide if it’s feasible.

Seriously, folks, I am frustrated to tears by not being able to add Font Awesome (and similar) icons inline with my EXISTING text. Rebuilding that text in an HTML Widget or jumping through multiple hoops with Inline SVG isn’t a realistic choice here. We need new functionality to better streamline our experience in Blocs.

Fingers crossed!

3 Likes

I feel your pain…

Would be really nice to be able to easily do this.

1 Like

Thanks. It would be greatly appreciated if you could give my opening post a click on the :heart:. I think Norm counts :heart:’s to decide if a Wish List request is worthy of implementation. Hopefully we can get a few thousand clicks in short order to get this feature implemented in the next update! :slight_smile:

Would have clicked it more than once if I could :grinning:

1 Like

@Norm, you heard that. His single click of the :heart: counts as 2!

@JDW @AngelArs

Hi guys,

I’ve not been active with Blocs for a very long time.
I know this isn’t exactly what you were looking for.
Until an easier integrated way is available, here’s “one” way you can use Font Awesome icons in text paragraphs.
And also be able to change colors on them as you like.
It’s not as easy as click an add… but not to messy either :nerd_face:

Cheers

https://monosnap.com/file/rxUUkE8QFkFtRWELvk8NCfrE9HBabR

1 Like

Thank you for the video, but that is the polar opposite of what I wrote in my opening post where I specifically stated, " without fiddling with HTML Widgets." Call it Code Widget or HTML Widget, it’s all the same thing.

If you have a 100 page website with dozens upon dozens of paragraphs that already exist, are you really going to manually convert all those to Code Widgets? No. Absolutely positively no, you are not. That is why my opening post is what it is. Sure, anybody can easily add FontAwesome when they START by creating a Code Widget paragraph. I do that in my sleep. But rebuilding an entire site or multiple sites with that? No way!

So I repeat my opening post. I want a drop-dead click-paste-go! solution to this most fundamental problem in Blocs. It can be easier than it is now. It must be easier! @Norm, save us!

1 Like

That’s why i wrote that this wasn’t exactly what you were looking for…
I had no idea that you could do this in your sleep.
And just wanted to share a way to do it that wasn’t to complicated until an easier way is available.

2 Likes

Blocs is calling your name… “Come back to me, @Jakerlund! Come back!”
:slight_smile:

1 Like

Hello @JDW there is another way if you allow me:

  • in any part of the text you need the icon you add 1 space;
  • select that specific space and span it;
  • in that span you add a class “fa” so the system know that you calling Font Awesome and then tell it what icon you want;
  • for that you add the class for example “fa-heart”

And voila:

Extra:

  • Change size: Add class: fa-lg; fa-2x; fa-3x; fa-4x; fa-5x;
  • Rotate Icon: Add class: fa-rotate-90; fa-rotate-180; fa-rotate-270;
  • Flip Icon: Add class: fa-flip-horizontal; fa-flip-vertical
  • Animate spinning:
    - Smooth rotation: Add class: fa-spin
    - Rotation in 8 steps: Add class: fa-pulse
  • Change color: if it is for all icons you can change “fa” class, if it is only for a specific one add a extra class regarding your needs.

Instead of using FA icons and you want Special Icons and Symbols, go to my site at LINK, just click in any you want and paste it in any place you need, is even easier.

Hope it helps you,

5 Likes

@Pealco this sounds good as a solution. Just a little labour intensive if there are a lot of icons tobe used and maybe even changed.

However I think this whole procedure should be as easy as inserting the Icon bric into an empty column but inserting the Icon bric anywhere between text letters in the Paragraph (or any other Headline) bric. It is also important not only to be able to choose from Font Awesome but also from the other Icon Fonts in the Icon Font Manager.
I always think the whole purpose of Blocs existing is to make as many functions as simple as possible for the user.

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

The macOs menu also provides all the specialised character under the Language menu with “Show Emoji and Symbols”. If opened any chosen character can be copied and pasted. But it is a nice work (and it looks good) to put them on a website for access.

1 Like

Nice @Pealco, I actually tried adding a span and classes the other day, but had an issue with it working for some reason, glad it works.

@StFoldex Blocs has that in the menu system already… EDIT -> Emoji and Symbols

@Malachiman
Ha, I lost sight of the wood for the trees. :laughing: Never discovered this, because I never had to insert any special character.

@StFoldex I only saw it the other day. Made me sound clever though. :rofl: :rofl:

1 Like

@Pealco I appreciate your kind help, but I cannot get anything other than a box when I do what you suggest. Here are exact steps that I am performing:

  1. Launch Blocs
  2. New document.
  3. Empty Page
  4. Add “Structure 1 Column”
  5. Add “Paragraph” inside your Column
  6. Select one of the existing spaces and apply Span to it.
  7. Type “fa-heart” inside the Classes field in the right sidebar.
  8. Note your span now holds a square character and it looks that way when you Preview in Blocs too. :frowning:

image

image

@JDW,

Thats because Font Awesome needs two classes. fa and fa-heart

1 Like

Bless you for the super fast reply, my dear friend! THAT is the solution!

image

image

Step 3 then 4.

1 Like

Thanks!

The only problem I’m having now is that I want to add a FA icon inside an existing Span which would require a Span within a Span. How do I accomplish that magic feat in Blocs, do you know?

You didn’t reply to my previous post, indicating I may have stumped you. Not to fear! Here’s another question that may likely stump you too…

I have existing Text Links like this:

image

If I add a Space inside that, the little blue popover content never appears!

Blue popover: image

In fact, I can only select the Space I added by holding Shift and using the Arrow keys, and that’s probably way the little blue popover never appears. How do I force the blue popover to appear or otherwise apply a Span when that blue popover won’t appear?

BTW, I can select ALL the text inside that “A” box, but that results in this limited popover which won’t allow me to add a Span:
image

I’ve found that I can add the Space outside the A-box and get my FontAwesome icon to appear, but that’s not what I want because I want that Icon to be a clickable link too, along side the text. And while I can simply use “A” instead of Span to make the Icon to appear, that would create a separate hyperlink right next to my text hyperlink, which is not desirable. I want both the Icon and the text it sits right next to, to be the same hyperlink.

If you reply only to tell me that what I want to accomplish in this post and my previous post is not currently possible in Blocs, then such shows that @Norm needs to get involved and my Wish List request is still valid.

Thanks.