« Web, HTML, Tech Forum

How to replace external link icons?

Posted by Parviz

posted 1738104215

Howdy, I am trying to brush up my theme and am currently trying to figure out how to replace these icons with a different image.

I tried to replace the target images with the nth-child class for the table but that doesn't seem to work. If anyone has any suggestions place lmk !

Report Topic

2 Replies

Sort Replies:

Reply by Dima

posted 1738246815
updated 1738248411

I think you could try something like this:

<style>
.table-section:last-child .details-table td:first-child img {
    display: none;
}

.table-section:last-child .details-table td:first-child a {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 4px;
}

.table-section:last-child .details-table td:first-child a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain; 
    background-repeat: no-repeat;
}

/* Tumblr */
.table-section:last-child .details-table td:first-child a[href*="tumblr.com"]::before {
  background-image: url("https://your-custom-icon-link.png");
}

/* Other social Icons ... */
</style>

Permalink Report Reply

Reply by Parviz

posted 1738256996

That worked perfectly! thank you!

Permalink Report Reply