1
I need to implement a icone
in the :after
of this field of radio
because I want it to look like the picture I managed to insert the css
normal I’m just not able to implement the icon that would be in the left corner of the screen I’m doing wrong follows the code:
<li class="col-lg-3 col-xlg-2 ">
<label class="label-image">
<input class="input-image" type="radio" name="fb" value="small" />
<img src="assets/images/covers/cover-01.jpg" class="img-fluid" />
</label>
</li>
<li class="col-lg-3 col-xlg-2 ">
<label class="label-image">
<input class="input-image" type="radio" name="fb" value="small" />
<img src="assets/images/covers/cover-02.jpg" class="img-fluid" />
</label>
</li>
SCSS:
.label-image > .input-image {
visibility: hidden;
position: absolute;
+ img {
cursor: pointer;
border: 5px solid transparent;
}
&:checked + img {
border: 25px solid $white;
position: relative;
&:after{
content: "\f00c";
font-family: "Font Awesome 5 Brands";
position: absolute;
right: 0;
top: 0;
color: $white;
font-size: 30px;
background-color: $orange;
border-radius: 100px;
padding: 15px;
}
}
}
Vc refers to blue ball with a check at the top left of the pictures?
– hugocsl
@hugocsl even I’m not able to make them appear
– Felipe Henrique
@hugocsl any idea what might be ?
– Felipe Henrique
You are using which version of Bootstrap?
– hugocsl
@hugocsl to version 4
– Felipe Henrique
Cara has some details that I’ll have to mess with the html structure... the order of the tags etc... but the main thing about your code not working is that you can’t use a ::after in a tag
<img>
as you can see here https://answall.com/questions/263040/os-pseudo-elements-after-e-before-functionam-em-quais-input-types so you have to rethink the structure understand...– hugocsl