Categories
css less twitter-bootstrap

bootstrap 3 built in image replacement?

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?

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();
}