Home > database >  Where is the x icon in this HTML and Sass (or equivalent CSS)?
Where is the x icon in this HTML and Sass (or equivalent CSS)?

Time:09-14

I do not understand where the x icon is defined in the following HTML and Sass. I had expected something like an fa unicode, e.g. content: "\f00d", but content is empty as seen below. Where does the icon that you can see in the image after the username come from?

x-icon

      .logout
        padding: 0 12px
        position: relative

        a
          position: absolute
          height: 50px
          width: 20px
          top: -16px
          left: 0
          cursor: pointer
          padding: 0

          &:before,
          &:after
            width: 2px
            height: 12px
            left: 10px
            top: 50%
            margin-top: -6px
            content: ""
            position: absolute
            background-color: #AAAAAA

          &:before
            -ms-transform: rotate(-45deg)
            -webkit-transform: rotate(-45deg)
            transform: rotate(-45deg)


          &:after
            -ms-transform: rotate(45deg)
            -webkit-transform: rotate(45deg)
            transform: rotate(45deg)

          &:hover
            &:before,
            &:after
              background-color: #111111
<nav >
    <ul >
        <li>other items...</li>
        <li>
            <span>
                <span>User: Pao</span>
                <span >
                    <a href="/logout"></a>
                </span>
            </span>
        </li>
        <li>other items...</li>
    </ul>
</nav> 

CodePudding user response:

Yes. As @BehRouz mentioned,

      &:before,
      &:after
        width: 2px
        height: 12px
        left: 10px
        top: 50%
        margin-top: -6px
        content: ""
        position: absolute
        background-color: #AAAAAA
      &:before
        -ms-transform: rotate(-45deg)
        -webkit-transform: rotate(-45deg)
        transform: rotate(-45deg)


      &:after
        -ms-transform: rotate(45deg)
        -webkit-transform: rotate(45deg)
        transform: rotate(45deg)

This code refers to the close button. Please inspect the X icon and you will see the above code on the right side of the inspect tool.

  • Related