Icon and Text

If you want to place an icon and text, do you use a button block?
I used to insert icons directly into paragraph block or heading block in my previous block plugin, so I feel uncomfortable using button block even though it is not a button shape.
I understand that both are the same in function.

It depends on a use case.

I think the best approach would be to add a DIV element with text and icon inside.

Let me know if this is what you are asking or if you do want to know something else.

@Dev.tomi Thanks!
I asked the question simply because I was curious how others inserted the icons.
As a heavy user of other block plugins (so far), it is more convenient to be able to insert icons directly, so I would like to know if there is an easier way.

There are many options to add an icon element. Besides the general option of just putting an icon into a div, or adding an icon inside a button element, you can also make use of :before or :after pseudo CSS classes to do it.

It is just not so convenient as using an icon inside a div or a button element.

It would be useful to be able to quickly create text with icons, so I will request the feature.
@Dev.tomi Thank you for your opinion.

You’re always welcome @Takeru

1 Like

As @Dev.tomi stated, it really depends.

Since <span> tags were introduced, I think you are pretty good covered with the button block, even for (more) complex stuff.

Using a div block that wraps your paragraph and icon block gives you even more flexibility and a better control of all elements. But that’s maybe rather recommended for a bit more advanced users.

I exactly know what you are referring to @Takeru.
But at the end of the day, you will get used to it, I am pretty sure.
E.g. I made the suggestion for custom HTML tags for button blocks (when link wrapper is not active) to have the ability to use them as list items (text + icon).
Yeah, my block would have the name “button” then, but what actually counts is the result, right?

Covering all those cases would require dozens of dedicated blocks to fit “all needs”.
Cwicly does exactly the opposite.
It gives you all tools you need for the most flexibility and design freedom.
Sure, it is more convenient to just click things inside a single block option, but doesn’t that limit you in some way?

1 Like

Exactly. Perfect answer man.

Indeed, I think you are right for flexible and free design.
In terms of results only, I think I can accomplish some of what I want to do with the button block.

As for limitations, I haven’t tried it yet, but with a button block, is there a limitation that only icons can be animated?

1 Like

You can achieve that quite easy with Relative Styling. In case you don’t know where to start, I would be happy to build and share something for/with you according to your instructions, so you will get a better idea how things work.

Thank you!
I’ll give it a try.

1 Like

I’m sorry, but I didn’t know how to do this.:pray:

1 Like

I think as you continue to use Cwicly, you will start to learn more about best practices. Other builders have components like “Icon box” or something like that, which is easy to use, but there is always some limitation, because it was conceived to work in the way the developer wanted.

Cwicly leaves it up to you how you want to do things like this. This freedom can be overwhelming sometimes.

I really hope you embrace it, and push yourself to learn some new techniques. It’s challenging and frustrating, but it is so empowering once you get comfortable doing it.