I feel your pain…
Would be really nice to be able to easily do this.
I feel your pain…
Would be really nice to be able to easily do this.
Thanks. It would be greatly appreciated if you could give my opening post a click on the . I think Norm counts ’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!
Would have clicked it more than once if I could
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
Cheers
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!
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.
Hello @JDW there is another way if you allow me:
And voila:
Extra:
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,
@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.
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
@PeteSharp
Ha, I lost sight of the wood for the trees. Never discovered this, because I never had to insert any special character.
@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:
Bless you for the super fast reply, my dear friend! THAT is the solution!
Step 3 then 4.
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:
If I add a Space inside that, the little blue popover content never appears!
Blue popover:
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:
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.
? 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