Albertus Brand Venter Albertus Brand Venter - 19 days ago 6
CSS Question

Quicker coding by combining CSS classes without using a preprocessor

When building forms,I need to indicate which are required. I follow this recipe:

<span class='glyphicon glyphicon-asterisk' style'color:red;font-size:9px;'></span>Label


My goal is to create 1 CSS class that uses the Bootstrap
glyphicon
class as well as bootstrap's
glyphicon-asterisk
But also allowing me to combine my own style rules.I have read that people use LESS mixins to do this. However I am asking if it is possible to go another route

The code looking something like this:

.req{
position:relative;
top:1px;
display:inline-block;
font-family: 'Glyphicons Halflings';
font-style:normal;
font-weight:normal;
font-size: 9px;
font-color:red;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content:"\2a";


}


However for some reason this does not work.

This is the two bootstrap classes I wish to combine.

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}


How can I achieve this without using LESS or SASS or any preprocessor So that when using the code:

<span class='req'></span>Label


I will receive the same output as the original one.

Note I do not want to overwrite the existing bootstrap classes. I want to create a new class in my own style.css that makes use of the two bootstrap classes.

Answer

There is no font-color CSS property, you have to use color. And if you want to use just one class you can use this code.

.req {
  position: relative;
  top: 1px;
  display: inline-block;
  color: red;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.req:before {
  content: "\2a";
}
Comments