Hover SVG icon

kkedwards87 · November 7, 2022

Hi,

Here's my code for an SVG icon on the home page of my site.

I'm wanting to have #336699 on hover.

Screenshot of my site attached. Would I apply this to each individual icon code block or in the Custom CSS block?

Can anyone help please?

Thanks

Beyondspace · November 7, 2022

31 minutes ago, kkedwards87 said:

Hi,

Here's my code for an SVG icon on the home page of my site.

I'm wanting to have #336699 on hover.

Screenshot of my site attached. Would I apply this to each individual icon code block or in the Custom CSS block?

Can anyone help please?

Thanks

<div style="text-align: center">
<svg style="fill: #99CC33" width="80" height="80" viewBox=" 0 0 24 24"
xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/></svg>
</div>

Have you changed this code to your desired color?

If it doesn't work, you can share your site with the site-wide password so we can take a look

creedon · November 7, 2022

I suggest something like the following.

<style>

  .svg-icon {
  
    fill : #99CC33;
    
    }
    
  .svg-icon:hover {
  
    fill : #336699;
    
    }
    
  </style>

<div style="text-align: center">

  <svg class="svg-icon" width="80" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
  
    <path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/>
    
    </svg>
    
  </div>

I encourage you to change the svg-icon class name to something more appropriate to your context. Since I don't know what your context is, I just picked a very generic name.

Since you have multiple icons you could break the style tag into a code block on its own so you don't have to repeat it for each icon.

Let us know how it goes.

kkedwards87 · November 8, 2022

Thanks so much for your responses.

@creedon your code worked perfectly.

Really appreciate it.

kkedwards87 · December 8, 2022

Hi @creedon

Do you know how I would link these icons to another page on the website or an external website?

As an example, the code I've got for the first icon is as follows. How would I link that? Thank you

creedon · December 8, 2022

On 12/7/2022 at 5:14 PM, kkedwards87 said:

Do you know how I would link these icons to another page on the website or an external website?

Try the following.

<style>

  .tenancy-icon {
  
    fill : #99CC33;
    transition : 0.3s;
    
    }
    
  .tenancy-icon:hover {
  
    fill : #336699;
    
    }
    
  </style>

<div style="text-align : center;">

  <a alt="Squarespace" href="https://www.squarespace.com/" title="Squarespace" xlink:href="https://www.squarespace.com/">
  
    <svg class="tenancy-icon" width="60" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
    
        <path d="M13 23h-6v-6.065c.626-.155 1.04-.496 1.319-1.046 2.152.773 3.647-2.303 1.819-3.556.949-1.116.245-2.727-1.207-2.522-.698-2.361-4.151-2.379-4.85 0-1.405-.227-2.186 1.199-1.385 2.289-1.648 1.404-.105 4.036 1.872 3.467.217.703.78 1.184 1.432 1.357v6.076h-2v-4.877c-.304-.239-.551-.515-.546-.51-2.001-.266-3.454-2.114-3.454-4.069 0-.583.129-1.173.41-1.735-.322-1.653.654-3.337 2.356-3.874l.018-.006c.827-1.162 2.152-1.823 3.517-1.893l5.682-5.036 12.017 10.647-1.33 1.491-10.687-9.469-3.284 2.908c.308.164.595.36.855.59l2.419-2.149c1.126.998 2.255 1.995 3.384 2.993l2.258 1.994 3.385 2.995v10h-6v-5h-2v5zm-2-5.585c-.713.445-1.259.529-2 .585v3h2v-3.585zm1.415-1.406l4.585-.009v5h2v-7.117l-7.027-6.196-.813.72c1.124.795 1.697 2.21 1.351 3.614.646 1.147.669 2.693-.096 3.988m-5.962-3.688c1.495-1.022 3.241.769 2.302 2.224.002-1.472-.852-2.279-2.302-2.224m-2.118 1.19c-1.247-1.865 1.004-4.164 2.904-2.894-1.892-.032-2.946 1.043-2.904 2.894"/>
        
      </svg>
      
    </a>
    
  </div>

Let us know how it goes.

Edited December 13, 2022 by creedon
version 2

kkedwards87 · December 11, 2022

@creedonthanks so much.

That has worked however there's one small problem in that the icon is black until I hover on it and then it turns green and the blue hover works.

Happens on each refresh.

creedon · December 12, 2022

9 hours ago, kkedwards87 said:

That has worked however there's one small problem in that the icon is black until I hover on it and then it turns green and the blue hover works.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

kkedwards87 · December 13, 2022

@creedon https://ocht.squarespace.com/?password=OCHT

Thank you!

creedon · December 13, 2022

On 12/11/2022 at 12:24 PM, kkedwards87 said:

there's one small problem in that the icon is black until I hover on it

I have updated my code post.

kkedwards87 · December 13, 2022

@creedonyou are such a star, thanks

kkedwards87 · January 30

Hi @creedon

What would you put to link to an internal page instead of an external page in this section:

<a alt="Squarespace" href="https://www.squarespace.com/" title="Squarespace" xlink:href="https://www.squarespace.com/">

I'd like to link the first icon to the apply for housing page. I need to build pages for the other icons.

Also how do you hide the underline that comes up when a hyperlink is added?

https://ocht-org-nz.squarespace.com/

p/w: ocht

Thank you

Edited January 30 by kkedwards87

creedon · January 30

3 hours ago, kkedwards87 said:

What would you put to link to an internal page instead of an external page in this section:

In general you can just copy the URL Slug for the SS page. It is basically the full url (https://www.squarespace.com/your-url-slug-here) minus the beginning of the URL (https://www.squarespace.com).

<a alt="Squarespace" href="/your-url-slug-here" title="Squarespace" xlink:href="/your-url-slug-here">

Let us know how it goes.

creedon · January 30

3 hours ago, kkedwards87 said:

Also how do you hide the underline that comes up when a hyperlink is added?

Site-wide or specifically in the code you posted?

kkedwards87 · January 30

@creedonthank you - the link works!

Regarding the hyperlink, I think knowing both wouldn't be a bad idea please.

creedon · January 30

11 minutes ago, kkedwards87 said:

Regarding the hyperlink, I think knowing both wouldn't be a bad idea please.

Please post the URL for a page where you are using code similar to what you posted so I can come up with some examples.

kkedwards87 · January 30

Hi @creedon

The home page under the icons is the offender.

https://ocht-org-nz.squarespace.com/

p/w: ocht

Then the page /apply-for-housing has a hyperlink underlined. I don't think that looks as bad but it'd be good to know how to remove it all the same.

Thank you.

creedon · January 30

55 minutes ago, kkedwards87 said:

Regarding the hyperlink, I think knowing both wouldn't be a bad idea please.

At the text block level, site wide.

.sqs-block-html a {

  text-decoration : none;
  
  }

You can restrict it to certain blocks.

#block-yui_3_17_2_1_1674081479053_21537 {

  text-decoration : none;
  
  }

kkedwards87 · January 30

@creedonyou are a true legend - thank you.

kkedwards87 · February 8

Hi @creedon

Regarding the code you gave me: <a alt="Squarespace" href="/your-url-slug-here" title="Squarespace" xlink:href="/your-url-slug-here">

It's causing the next section to distort.

Another member mentioned the full code may be missing closing tags. I added </a> to the end but that didn't work.

Here's the full code:

Edited February 8 by kkedwards87

creedon · February 8

30 minutes ago, kkedwards87 said:

Regarding the code you gave me: <a alt="Squarespace" href="/your-url-slug-here" title="Squarespace" xlink:href="/your-url-slug-here">

It's causing the next section to distort.

Another member mentioned the full code may be missing closing tags. I added </a> to the end but that didn't work.

My December 7, 2022 post does show the full code.

The later example code fragments were meant as an example how to format the line for internal URLs that should be applied to the original code.

Your most recent code is indeed missing an closing a tag.

<style>

  .complaint-icon {
  
    fill : #99CC33;
    transition : 0.3s;
    
    }
    
  .complaint-icon:hover {
  
    fill : #336699;
    
    }
    
  </style>

<div style="text-align: center">

  <a alt="Squarespace" href="/our-complaints-process" title="Squarespace" xlink:href="/our-complaints-process">
  
    <svg class="complaint-icon" width="60" height="80" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
    
      <path d="M12.399 2.276c-.208-.63.264-1.276.919-1.276.405 0 .783.257.918.664l5.691 14.286c.169.509-.106 1.057-.613 1.226-.507.169-1.055-.106-1.224-.614 0 0-3.593-1.203-7.854.211l2.801 4.354c.291.428.088 1.013-.396 1.173l-1.904.634c-.131.044-.267.066-.401.066-.357 0-.705-.152-.951-.429l-3.85-4.247c-2.096.661-4.468-.102-5.26-2.076-.182-.453-.275-.936-.275-1.421 0-1.407.786-2.842 2.492-3.68 8.541-4.194 9.907-8.871 9.907-8.871m6.067.913c1.518.641 2.789 1.865 3.459 3.516.669 1.651.607 3.42-.034 4.94l1.474.626c.415-.985.635-2.053.635-3.141 0-3.167-1.873-6.133-4.911-7.419l-.623 1.478zm-1.064 2.523c.874.368 1.608 1.073 1.992 2.024.386.951.351 1.968-.017 2.843l1.436.61c.524-1.246.576-2.691.028-4.042-.547-1.352-1.588-2.352-2.831-2.877l-.608 1.442z"/>
      
      </svg>
      
    </a>
    
  </div>

Let us know how it goes.

kkedwards87 · February 8

@creedonthat's worked like a charm, thank you. Sorry for missing the December 7 post.

Edited February 8 by kkedwards87

Hover SVG icon

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon

Beyondspace

kkedwards87

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources