The result:
First of all add this to your extra.less template:
You can modify it as you wish.
Then, to create a banner, add this:
First of all add this to your extra.less template:
CSS:
pre {
color: rgba(255,255,255,0.8);
border-radius: 2px;
display: inline-block;
position: relative;
font-size: 90%;
padding: 0 5px 0 32px;
cursor: pointer;
font-size: 83%;
font-weight: normal;
}
.pre::before {
background-color: rgba(0,0,0,0.2);
position: absolute;
border-top-right-radius: 40px;
border-right: 2px solid rgb(0,0,0);
border-right: 2px solid rgba(0,0,0, 0.1);
_border-right: 2px solid rgb(0,0,0);
top: 0;
bottom: 0;
left: 0;
padding: 1px 4px 0 3px;
width: 20px;
font-family: FontAwesome;
text-align: center;
}
You can modify it as you wish.
Then, to create a banner, add this:
CSS:
.pre-BANNIERE1::before {
content:"\f27e";
}
.pre-BANNIERE1 {
background: red;
}