Dashicons가 Wordpress Nav 메뉴에서 호버 효과를 얻도록

Question

위로 이동 메뉴 http://www.footballpractice.org을 보면 Wordpress 메뉴를 통해 할당 된 CSS 클래스를 사용하여 거기에 대시 콘을 추가하려고 시도했음을 알 수 있습니다. 대시 콘은 일반 상태에서는 괜찮아 보이지만 호버 효과는 사용하지 않습니다. hover 클래스를 a : before 요소에 적용하는 가장 좋은 방법은 무엇입니까?

Answer 1

한 가지 방법은 다음을 적용하는 것입니다. 마우스를 올려 놓기 전에 : 전에. 것입니다 귀하의 웹 사이트에 대한

div:hover:before { 
... 
} 

이 비록

.dashicons-megaphone:hover:before, 
.dashicons-search:hover:before, 
.dashicons-groups:hover:before, 
.dashicons-format-video:hover:before { 
... 
} 

그것은 당신이 원하는 게 아니에요, 당신이 물어 것입니다. 아이콘을 호버 효과에 포함 시키려면 a 태그 안쪽의 스팬 전에 설정하는 것이 좋습니다.

업데이트 된 HTML

<li> 
    <a href="#"> 
    <span>Drills</span> 
    </a> 
</li> 

업데이트 CSS는 그것을 할 것입니다

.nav-header .genesis-nav-menu li a span:before { 
    content: "\f488"; 
    font: normal 18px/1 'dashicons'; 
    margin-right: 5px; 
} 

는 당신이 더 많은 도움이 필요하면 알려주세요.