Icon Xoay

 

**** html:

<li class="has-child dmsp">

    <a href="javascript:void(0)">

        <i class="fa fa-bars"></i> Danh mục sản phẩm

    </a>

    <span class="arrow-opener"></span>

    <ul class="sub-menu">

        <li><a href="#">sub-menu 1</a></li>

        <li><a href="#">sub-menu 2</a></li>

        <li><a href="#">sub-menu 3</a></li>

    </ul>

</li>

**** CSS:

.menu-menu > ul > li.dmsp {

    display: flex;

    align-items: center;

    flex-direction: row;

    justify-content: space-between;

    font-weight: 600;

    transition: all .25s ease;

    padding: 0 5px;

}

.arrow-opener:after {

    font-family: FontAwesome;

    content: "\f107";

}

.arrow-opener {

    font-style: normal;

    font-size: 16px;

    transition: -webkit-transform .25s ease;

    transition: transform .25s ease;

    transition: transform .25s ease,-webkit-transform .25s ease;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}

.menu-menu > ul > li.dmsp:hover span.arrow-opener{

    -webkit-transform: rotate(-180deg);

    transform: rotate(-180deg);

}