ADD ICONS? (or use image in place of icon?)

I Need Help
1

I have icons I need to use that are not found in the default Blocs icon set(s). I’ve got the icons in a vector format and can save as either raster, vector or svg. Anyone know if it’s possible to add icons to the icon library or replace an icon with an image? Ideally, I’d like to place an image right next to a text heading (to the right), but haven’t been able to figure out how to do that. The image here shows what I’m trying to do. Even in the case of the Social Media icons, I can’t seem to place them just to the right of the headings text (so that they naturally move left and right as compelled by the text to their left, while maintaining same spacing.

Thanks in advance for any help!

.53%20PM

2

Hi @Creative

Unfortunateyl it is not possible to add icons to the icon library. That said you can use the image bric and insert your svg icons.

The way I have been doing it wih Blocs 3 to set the image left or right of text is to use a div and then 2 columns which you adjust the size, inside alignment, padding, etc…

I admit it can somtimes be a little tricky.

Let me know if you succeed this way.

MDS

1 Like
3

Hi @Creative

Actually a better solution to share with you which is using pseudo elements before and after.

For instance if you wish to place the icon after your text. In this case I am placing a png file after a H3 heading.

Code to add:

 <style>

    .h3-element:after {
      content: ' ';
      display: inline-block;
      position: absolute;
      background-image: url('https://images.techhive.com/images/article/2015/06/blocs_mac_icon-100588417-large970.idge.png');
      background-repeat: no-repeat;
      background-size: 45px 38px;
      height: 45px;
      width: 45px;
      margin-left: 10px;
      bottom: 15px;
    }

    </style>

The class .h3-element is to be applied to the heading H3. Background image can be any type of image, i.e. jpg, png, svg etc… Then you’ll need to adjust the settings for margin, size etc. (same applies for the pseudo “before” .h3-element:before )

Here is a sample bloc for the “after” element:

Image pseudo element.bloc (200.5 KB)

MDS

2 Likes
4

@MDS, thanks so much for the replies, I will be trying this and will let you know how it works out. In an interesting coincidence, I just randomly noticed and watched some Youtube tutorials on CSS pseudo elements just last week. I can see how that would work very well in this case! Thanks Again! - Randy

5

You’re welcome.

MDS

1 Like