Jump to content

Use small images in-line in text (as links)?

Go to solution Solved by tuanphan,

Recommended Posts

Hello, I'm wondering if anyone has a solution to use small PNG images in line in text (in my case, to use as social links). See  screenshot below:

image.png.e328ff53d0fecc9fed6ca99eaf1f20b5.png

 

I'd love the Instagram and Twitter images to just live in the text box next to the word "HOME" and adapt as that text box does but I haven't found a solution yet. Also, I want to obviously make them links to my social sites. Any help is appreciated!

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Hello, the site URL is https://flugelhorn-opossum-4ese.squarespace.com/

Here is my current text box (the instagram and twitter icons are images, in separate blocks), but ideally I'd like something to work in one block.

image.png.acf6132e7c8fc7347776f8189d402aa6.png

I found one tutorial (https://insidethesquare.co/squarespace-tutorials/image-in-text) that was pretty straightforward, but resulted in poor sizing/scaling, and I couldn't correct it. I'm happy to use different images for Instagram/Twitter if needed, but wasn't sure if there was an easy fix.

image.png.d31dd07da237c8cbd34d70faeaa4e23e.png

Thanks!!

Link to comment
On 5/10/2023 at 11:17 PM, rharer said:

Take a look at this test page here:

https://flugelhorn-opossum-4ese.squarespace.com/tesssstttt

It includes a block with my current workings of this.

I see you figured it out? All same line here

image.thumb.png.f732a39d6aa4f7b5bdde2d5f236969d3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

That’s the best I was able to do, however, even when I reduce the size of the image, it still appears at this size (too big, so the bottom is cut off in line with the text).

Link to comment
On 5/12/2023 at 8:57 PM, rharer said:

That’s the best I was able to do, however, even when I reduce the size of the image, it still appears at this size (too big, so the bottom is cut off in line with the text).

Can you keep images? We can give code to make images always fullsize

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
On 5/16/2023 at 12:09 AM, rharer said:

Ah, I think I see: I had broken the image CSS I had in there so the icons were gone for a moment. They're back now!

Add to Design > Custom CSS

.image1, .image2 {
    background-size: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.