Navigation


 Online publications


 Go back to the forum

Free Codes   

Add an image next to link text

System32 | Published on the sat Nov 26, 2022 4:23 pm | 65 Views

Greetings fellas, 

If you are interested how to add an image next to a link's text, you are in the right place because I will explain you the steps you need to take. And guess what? They are very simple. 

Go to CP > Display > Colors & CSS and depending on the platform add this:

AwesomeBB

.post-content a {
  color:#1e88e5;
  text-decoration:none;
}
.post-content a::before {
  content: url('https://i.ibb.co/LhdS8fn/link.png');
}

ModernBB & phpBB3

.content a {
  color:#1e88e5;
  text-decoration:none;
}
.content a::before {
 content: url('https://i.ibb.co/LhdS8fn/link.png')
}

Invision

.post-entry a {
  color:#1e88e5;
  text-decoration:none;
}
.post-entry a::before {
  content: url('https://i.ibb.co/LhdS8fn/link.png');
}

PunBB

.entry-content a {
  color:#1e88e5 !important;
  text-decoration:none;
}
.entry-content a::before {
  content: url('https://i.ibb.co/LhdS8fn/link.png');
}

phpBB2

.postbody a {
  color:#1e88e5;
  text-decoration:none;
}
.postbody a::before {
  content: url('https://i.ibb.co/LhdS8fn/link.png');
}

Final result:

Now, if you pay closer attention to the code, notice how I added my own image inside content property. You can change that to anything you wish to. If you are not good at Photoshop, you can find cool icons at: https://www.iconfinder.com/

Cheers

About the author