I can’t insert icon inside an image with after or before

Asked

Viewed 190 times

1

I need to implement a icone in the :after of this field of radio because I want it to look like the picture inserir a descrição da imagem aqui 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;
      }
    }
}
  • 1

    Vc refers to blue ball with a check at the top left of the pictures?

  • @hugocsl even I’m not able to make them appear

  • @hugocsl any idea what might be ?

  • 1

    You are using which version of Bootstrap?

  • @hugocsl to version 4

  • 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...

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.