Hover SVG icon

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>

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

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.

Thanks so much for your responses.

@creedon your code worked perfectly.

Really appreciate it.

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

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

<div style="text-align: center">
<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>
</div>

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.

@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.

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.

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

Thank you!

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.

@creedonyou are such a star, thanks

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

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.

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?

@creedonthank you - the link works!

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

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.

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.

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;
  
  }

@creedonyou are a true legend - thank you.