Menu icon Foundation
zf-iconic change color on hover

How can I change the icon color on hover, active, etc?

I need to change the icon, the icon color and the background color on the hover state.

<div class="grid-block shrink vertical" style="background-color:#2a8cb2; padding:0">
	<div class="grid-block">
		<div class="grid-content">
			<section class="block-list block-list-no-margin">
				<ul class="">
					<li>
						<a class="sidebarmenu-button expand icon-top">
							<img zf-iconic icon="Document" data-direction="top" size="medium">
						</a>
					</li>
					<li>
						<a class="sidebarmenu-button expand icon-top">
							<img zf-iconic icon="Comment-square" data-direction="top" size="medium">
						</a>
					</li>
				</ul>
			</section>
		</div>
	</div>
	<div class="grid-block shrink">
		<div class="grid-content">
			<section class="block-list block-list-no-margin">
				<ul class="">
					<li>
						<a class="sidebarmenu-button expand icon-top">
							<img zf-iconic icon="Document" data-direction="top" size="medium" class="iconic-color-success">
						</a>
					</li>
				</ul>
			</section>
		</div>
		</div>
	</div>
</div>

 

I'm trying to change the css color propertie on hover state with no luck...

 

<img zf-iconic icon="Document" data-direction="top" size="medium" class="iconic-color-success">

This is also not working. The only way I successfully change the color is setting the color on the custom button.

.sidebarmenu-button
{
    @extend %button;

    @include button-size($size: medium, $expand: true);

    @include button-style(
        $background: #0578a5,
        $background-hover: #fff,
        $color: #fff,
        $style: solid
    );

    margin:0;

    &.sidebarmenu-button-disabled 
    {
        @include button-disabled;
    }
}

 

 

angulariconscssscsszf-iconic

How can I change the icon color on hover, active, etc?

I need to change the icon, the icon color and the background color on the hover state.

<div class="grid-block shrink vertical" style="background-color:#2a8cb2; padding:0">
	<div class="grid-block">
		<div class="grid-content">
			<section class="block-list block-list-no-margin">
				<ul class="">
					<li>
						<a class="sidebarmenu-button expand icon-top">
							<img zf-iconic icon="Document" data-direction="top" size="medium">
						</a>
					</li>
					<li>
						<a class="sidebarmenu-button expand icon-top">
							<img zf-iconic icon="Comment-square" data-direction="top" size="medium">
						</a>
					</li>
				</ul>
			</section>
		</div>
	</div>
	<div class="grid-block shrink">
		<div class="grid-content">
			<section class="block-list block-list-no-margin">
				<ul class="">
					<li>
						<a class="sidebarmenu-button expand icon-top">
							<img zf-iconic icon="Document" data-direction="top" size="medium" class="iconic-color-success">
						</a>
					</li>
				</ul>
			</section>
		</div>
		</div>
	</div>
</div>

 

I'm trying to change the css color propertie on hover state with no luck...

 

<img zf-iconic icon="Document" data-direction="top" size="medium" class="iconic-color-success">

This is also not working. The only way I successfully change the color is setting the color on the custom button.

.sidebarmenu-button
{
    @extend %button;

    @include button-size($size: medium, $expand: true);

    @include button-style(
        $background: #0578a5,
        $background-hover: #fff,
        $color: #fff,
        $style: solid
    );

    margin:0;

    &.sidebarmenu-button-disabled 
    {
        @include button-disabled;
    }
}