[Resolved] Remove link styling from Social Icons

[Pintu]

Hi

I am using the following CSS to style my links.

.entry-content a:not(.button):not(.wp-block-button__link) {
	text-decoration: none;
    background-image:
      linear-gradient(
          transparent 2px,
          #2ed392 2px,
          #2ed392 4px,
          transparent 4px
      ),
      linear-gradient(
          transparent 2px,
          #d8dce9 2px,
          #d8dce9 4px,
          transparent 4px
      );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
   	padding-bottom: 4px;
}
.entry-content a:hover:not(.button):not(.wp-block-button__link){
    background-size: 100% 6px;
}

However, this style is also applying to my contact form social media icons (Twitter, Pinterest, Telegram) as well.

How do I remove this style from social media icons?

I’ve added my contact page link in the private area. You can check.

[David]

Hi there,

try this:

.entry-content a:not(.button):not([class*="wp-block"][class*="link"]) {
	text-decoration: none;
    background-image:
      linear-gradient(
          transparent 2px,
          #2ed392 2px,
          #2ed392 4px,
          transparent 4px
      ),
      linear-gradient(
          transparent 2px,
          #d8dce9 2px,
          #d8dce9 4px,
          transparent 4px
      );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
   	padding-bottom: 4px;
}
.entry-content a:hover:not(.button):not([class*="wp-block"][class*="link"]){
    background-size: 100% 6px;
}

This: :not([class*="wp-block"][class*="link"]) should exclude any a elements that have the wp-block string and link string in their classes.

[Pintu]

Thank you, David. It works.

I have another question. In the Social icon section of GenerateBlocks, there is no Telegram icon. Can you please tell me the ICON SVG HTML for Telegram?

[David]

Try this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8Zm114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.452 10.452 0 0 1 3.53 6.716 43.765 43.765 0 0 1 .417 9.769Z"/></svg>

I got it from FontAwesome. This doc explains how:
https://docs.generateblocks.com/article/adding-custom-svg-icons/

[Pintu]

Thanks a lot 🙂

[Pintu]

Re-opening this topic.

Previously, I used Gutenberg’s “Social Icon” on my Contact us page. And after using the CSS from David

.entry-content a:not(.button):not([class*="wp-block"][class*="link"]) {
	text-decoration: none;
    background-image:
      linear-gradient(
          transparent 2px,
          #2ed392 2px,
          #2ed392 4px,
          transparent 4px
      ),
      linear-gradient(
          transparent 2px,
          #d8dce9 2px,
          #d8dce9 4px,
          transparent 4px
      );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
   	padding-bottom: 4px;
}
.entry-content a:hover:not(.button):not([class*="wp-block"][class*="link"]){
    background-size: 100% 6px;
}

solved the problem of link style being added to the social icons. But now that I’m using the GB Buttons to add the social icons, the link style is again applying to the social icons.

Please tell me how to prevent link styling from being applied to icons.

I’ve added my contact us page in the private section.

[David]

It might be easier to do his:

.entry-content :is(p,li) a {
	text-decoration: none;
    background-image:
      linear-gradient(
          transparent 2px,
          #2ed392 2px,
          #2ed392 4px,
          transparent 4px
      ),
      linear-gradient(
          transparent 2px,
          #d8dce9 2px,
          #d8dce9 4px,
          transparent 4px
      );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
   	padding-bottom: 4px;
}
.entry-content :is(p,li) a:hover {
    background-size: 100% 6px;
}

This will target links only if they are are in a Paragraph or List item in the entry content.

[Pintu]

It’s perfect now.

[David]

Glad to hear that

[Author]

Posts