Using Inline SVG inline with text

I Need Help
1

I’ve read several threads talking about Inline SVG but none describe how to use it. The name suggests you can use it “inline” but that’s not what I am seeing. I want to use SVG’s inline with text (paragraph), but for the life of me, I can’t figure out how to do that.

Sure, I can add Inline SVG on its own line inside a Column, separate from everything else, but that’s not “inline” in my book. Again, how do I use Inline SVG to put an SVG (icon, whatever) inline with a block of text?

“Icon Heading” puts an icon line with text, but it limits you to having the icon fixed at left of the text. I was hoping Inline SVG would offer the freedom to put an SVG anywhere in the text, but again, I don’t see how to accomplish this with “Inline SVG.” Do you?

Thanks.

2

Hi @JDW

Yo could do it with a HTML widget. :nerd_face:
inline

Sample file: inline-svg.bloc (198.0 KB)

Cheers / Johny

2 Likes
3

Thank you for the example Bloc, Johny. That seems to be the only way of doing it. Which begs the question…

What is the purpose of “Inline SVG”? And how is it at all “inline”?

Thanks,

James

1 Like
4

Inline is handy since it’s embedded in the html code instead as linked files.
And quite useful with css classes so you can change colors of all svg’s instead of having to make new svg’s.
I’ve only used it once or twice and it was to have the css control over colors.
I had some icons and needed to change the colors several times to fit the over all theme, that process was so much faster than recreating all the svg’s.

Cheers / Johny :nerd_face:

5

I also see the need for more flexibility when entering text. I feel very constrained by Blocs way of handling text. It is really hard to do anything out of the ordinary, such as adding icons in the middle of some text, etc.

Also I find having to open the Bric overlay every time I want to add something text related like a header tag, bullet list etc. very time consuming.

2 Likes
6

My intent would be like that of @gary, to use it far more than once or twice. Being “inline with HTML” isn’t really what I seek. Like Gary, I want the freedom to drop an icon anywhere in text, as often as I want, without being forced to use Code Widgets and all that mess.

The easier you make text composition, the fast site construction becomes and the less burdensome the maintenance of the site.

7

Hi everyone,

Was there an easier solution to this in the end - I want to add a larger icon inline with text to use an icon as a bullet point for text - how would the best way for this and to add icons in paragraphs easy?

At the moment I get an icon sitting level with the text and it’s too high as I’d like to have the icon slightly bigger but it’s off centre.

8

I can’t speak for “bullets” but for icons inline with text, you can see how I added PDF icons on this page in my website. Here’s how I achieved that:

  1. I added a Class to the paragraph container to size my icon using Text Size.
  2. In the line of text you want to add the icon, hit the spacebar and then select that space.
  3. Wrap in Span (if you don’t want the icon to be a link) or Create Text Link (if you do)
  4. Inside the Classes field in the right sidebar type “fa” and hit return.
  5. Also inside the Classes field type “fa-file-pdf-o” (or whatever the name of the icon is, as per what is written on FontAwesome’s website).
  6. Because the icon was shifted wrong vertically, I needed to add one more Class, which I called “icon-link”.
  7. In Page Settings > Header, I added the following CSS code to make the icon be vertically centered with my text:

_

<style>
.icon-link {
   vertical-align: top;
}
</style>

–

1 Like
9

Thank you, I will give that a go. - fingers crossed !

1 Like