Jump to content

SVG icons after buttons not displaying

Recommended Posts

Hi there, 

I'm trying to add a custom SVG icon to display after some buttons (the orange 'View The Menu' buttons). I think I've added the correct code: 

 

section[data-section-id="64feb0001002d11ad7391587"] {
  .sqs-button-element--tertiary:after{ 
content: url(https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64ff574cc22531152b025dda/1694455628420/icon-sm.png)!important;
display: inline-block;
}
   .sqs-button-element--tertiary:hover:after{ 
content: url('https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64ff588a811d8b601288ba9c/1694455946747/arrow-icon-hover.svg')!important;
} 
}


When i add the svg icons after the button, they don't display? I added in a png icon, so you can see where it's supposed to go, but it's super blurry. And the svg icon on hover doesn't show at all. Any ideas if it's possible to fix this?

https://houseofbubbles.squarespace.com/the-bubbles-bar
password: bubbles

On the same site (in the footer), I'm also trying to remove the space between the newsletter sign up field, and the button. Does anyone have a little code snippet for this?

Thank you! 

Screenshot 2023-09-18 at 11.11.04 pm.png

Newsletter.jpg

Link to comment
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thank you @tuanphan

If I use a bigger size icon, the icon appears large, do you know what CSS I can use to contain the size?

Yes, for the newsletter block, I'm not sure if this CSS is ideal, but I used this to remove the space between the field and button: 

 

#block-ddd853fc87bd5be49c0b {
    padding-bottom: 0;

    .newsletter-form-body {
      padding-bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
    }

    .form-fields,
    .newsletter-form-button-wrapper {
      margin: 0 !important;
    }

    .field {
      padding: 0;
      width: 100%;
    }

    .submit-wrapper {
      padding: 0;
    }
}


 

Link to comment

You can use background-image attribute instead

section[data-section-id="64feb0001002d11ad7391587"] {
  .sqs-button-element--tertiary:after{ 
content: "";
background-image: url(https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64ff574cc22531152b025dda/1694455628420/icon-sm.png) !important;
background-size: contain;
display: inline-block;
    display: inline-block;
    width: 10px;
    height: 10px;
}
   .sqs-button-element--tertiary:hover:after{ 
background-image: url('https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64ff588a811d8b601288ba9c/1694455946747/arrow-icon-hover.svg') !important;
} 
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.