Xenforo Tutorial Hover Effect for action Bar CSS code

[Codes MagicCodes Magic is verified member.]

Compatible XF Versions

2.1 , 2.2

Add to extra.less
search for extra.less in the ACP Admin panel for Xenforo and paste this code

/*Action Bar*/
    .actionBar-action, .reaction-text
    {
        font-size: 0;
        .m-transition();
        &:before
        {
            font-size: @xf-fontSizeNormal;
            margin-right: 5px;
        }
        &--inlineMod, &--menuTrigger, &--reaction, &:hover, &:hover .reaction-text
        {
            font-size: 100%;
            text-decoration:none;
        }
        &--edit { .m-faBefore(@fa-var-pencil); }
        &--delete { .m-faBefore(@fa-var-times); }
        &--ip { .m-faBefore(@fa-var-search); }
        &--warn { .m-faBefore(@fa-var-exclamation); }
        &--spam { .m-faBefore(@fa-var-flag); }
        &--report { .m-faBefore(@fa-var-exclamation-triangle); }
        &--history { .m-faBefore(@fa-var-history); }
        @media(max-width: @xf-responsiveWide)
        {
            &:hover
            {
                font-size: 0;
                text-decoration:none;
            }
        }
    }
/*Action Bar*/

Works for Threads, Posts, Media, Articles and Resources.