CSS Text Replace with Image, Need Hyperlink

CSS text replace with image, need hyperlink

There are many ways to do this, this is the way that I prefer, it works well, and is easy to implement.

<div id="header">
    <h1><a href="/" title="Homepage">Homepage</a></h1>
</div>

Then i do this css, this is also know as the "Leafy/Langridge image replacement" method

#header h1 a {
    display: block;
    padding: 22px 0 0 0;
    overflow: hidden;
    background-image: url(../images/sidebar/heading.png);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:22px;
}

The only thing you should have to edit is the height, and the padding-top. In this example it is 22px, this should be equal to your image-height.

Text image replacement within a link

Make the a elements inline-block, then text-indent will have an effect on them.

UPDATED EXAMPLE HERE

.webcomic-above a {
    text-indent: -9999px;
    display:inline-block;
}

According to documentation, text-indent applies to block elements. The anchor elements are inline by default. Making them inline-block essentially fixes this.

Replace CSS Link or Hide under with Image?

I tested it with firebug directly on Your page. Try this:

#nextBtn a, #prevBtn a {
    display: block !important;
    text-indent: -9999px;
}

Important is this !important ;) It makes that this display: block is more important than display: inline which adds Your slider plugin.

Replace Text/Image URL with CSS

I think the javascript solution is the right way to go.

It's really hard to say what's wrong with just a few lines of js from tampermonkey. Is it possible to show the complete files? Or post an example on jsfiddle or something?

It's easy to debug this kind of issue yourself in Chrome Inspector, by typing "debugger" in your code and opening the Source tab in Chrome Inspector (F12 button in Chrome). The inspector will stop at that line and you can see the values of different variables. For example:

First, open Chrome Inspector in Chrome browser. Then load the page with the debugger line:

var imagelist = document.getElementsByClassName("forum_image_class");
debugger;
imagelist.foreach(function(element){
    element.src = element.src.replace("/45/", "/90/");
}

The browser will stop on the debugger line. Type 'imagelist' into the console and hit enter to see its current value. It might be empty, in which case the getElementsByClassName isnt retrieving anything. Which might be happening for a few different reasons. Or the imagelist array might get populated but the replace() isnt working as expected. Is it possible for you to figure out which is happenng and report it here?

ALSO: be careful with .replace(). You have to escape certain characters with a backslash and you should know what those special characters are. In this case you may or may not need to escape the forward slashes.

CSS replace span text by image inside tag a href

It is not appearing because when setting display:none to the span, your anchor has no size. A possible solution is to set the image as a pseudo element, like :before

.icons .twitter span {  display: none;}.icons .twitter:before {  text-decoration:none;  content: url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png');}

<div id="social" class="icons">  <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>  <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>  <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a></div>

.img a{
    display: inline-block;
    width: 96px; 
    height: 96px; 
    background: url("image.jpg"); 
    text-indent: -9999px; 
}

<a href="next.html" class="next-button"><span>Next</span></a>

.next-button
{
    display: inline-block;
    width: 100px; /* image width */
    height: 20px; /* image height */
    background: url("../images/next_button.png")
}

.next-button span
{
    display: none;
}

$(document).ready(function(){
  $("ul > li").click(function(){      $("ul > li").removeClass("active");      $(this).addClass("active");  });
});

ul{  list-style:none;}
ul li {  position: relative; }
li a {  text-decoration: none;}
li a i {  position: absolute;  left: 0px;}li a {  padding-left: 32px;}
li.active a {  color: green !important;}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>   <li class="active"><a href="#"><i class="fas fa-hospital first" aria-hidden="true"></i>arrows</a></li>   <li><a href="#"><i class="fas fa-cogs" aria-hidden="true"></i>battery</a></li>   <li><a href="#"><i class="fas fa-university" aria-hidden="true"></i>bell</a></li>   <li><a href="#"><i class="fas fa-industry" aria-hidden="true"></i>bicycle</a></li>   <li><a href="#"><i class="fas fa-music" aria-hidden="true"></i>circle</a></li>   <li><a href="#"><i class="fas fa-users" aria-hidden="true"></i>deaf</a></li></ul>