bootstrap 3 built in image replacement?

css, less, twitter-bootstrap

Solution

Yes, this does not include an image, it only hides text. You will need to do your own image replacement, perhaps in a custom CSS rule:

.my-image-replacement {
  background-image:url('myImage.jpg');
  .text-hide();
}

Problem

While digging through mixins.less file of bootstrap 3 I found the following: ``` // CSS image replacement // // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for // mixins being reused as classes with the same name, this doesn't hold up. As // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note // that we cannot chain the mixins together in Less, so they are repeated. // // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 // Deprecated as of v3.0.1 (will be removed in v4) .hide-text() { font: ~"0/0" a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } // New mixin to use as of v3.0.1 .text-hide() { font: ~"0/0" a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } ``` Has anyone been using this? Where do I specify the image that I want to replace the text? Am I right to assume that all this does is to hide text and not replacing it with an image?

Original source