html更改图像图标（如果处于活动状态）

Question

So i have some icons that i need to be filled in when its active. I'm using Framework 7 but i have custom images in the toolbar. (If there is a way to fill it in without a different image in use that would be good, otherwise i already have filled in versions of all of the icons)

Code:

<div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="#view-home" class="tab-link active">
            <span class="tabbar-label"></span>
            <img height='25px' src='../images/home.png'/>
        </a>
        <a href="#view-search" id="manage-button" class="tab-link">
            <span class="tabbar-label"></span>
            <img height='25px' src='../images/search.png'/>
        </a>
        <a href="#view-repos" id="manage-button" class="tab-link">
            <span class="tabbar-label"></span>
            <img height='35px' src='http://image.flaticon.com/icons/svg/60/60740.svg'/>
        </a>
        <a href="#view-install" class="tab-link">
            <span class="tabbar-label"></span>
            <img height='25px' src='../images/notifications.png'/>
        </a>
        <a href="#view-history" class="tab-link">
            <span class="tabbar-label"></span>
            <img height='25px' src='../images/profile.png'/>
        </a>
    </div>
</div>

Answer 1

I am also using Framework7 for my web app and have custom icons on toolbar as well. The way I accomplished this was to just use font icons and add my own custom font family class for my icons. There are plenty of libraries out there that contain thousands of options for you to pick from. I used Fontello for mine.

Here is a screenshot of one of the icons with side by side of inactive vs. active state:

In order to accomplish this I went to Fontello website and grabbed the font icons I wanted and then created my icon classes in my less file:

/* Font Declaration
====================*/

@font-face {
    font-family: 'poc-icon';
    src: url('@{icon-font-path}@{icon-font-name}.woff') format('woff');
}

/* Icon Prototype
==================*/

[class^='poc-icon-'], [class*=' poc-icon-'] {
    font-family: 'poc-icon';
    font-style:   normal;
    font-weight:  normal;
    font-variant: normal;
    line-height:  1;
    color: @icon-inactive-gray;
    display: inline-block;

    -webkit-font-smoothing: antialiased;
}

/* Icon Mapping (All icon class names MUST begin with 'poc-icon-'. For example, 'poc-icon-three-dots'.
================*/

.poc-icon-charting {&:before{content: "\e808";}}

Then when I wanted to use that icon class I just added it to my elements like so (This is in a React component ( Framework7-React ) so you would have to change up the syntax to pass in icon class for your use case but you probably get the point):

 <Link routeTabLink="resident-charting" text="Charting" tabLink icon="poc-icon-charting" />

The only thing left is applying your own active-state color if you want to override whatever the default behavior is. In my case I am using less and have a variable I store my color in for all of my icon's active state:

a.active, a.active-state {
    > i, i:before {
        color: @icon-active-blue !important;
    }
}

And since it is a font icon you can even take it one step further if you like and do your own sizing very easily:

i.icon.poc-icon-charting {
    font-size: 31px !important;
}

Sorry if this is overkill for what you were asking but it works out great for me whenever I want to add a new icon. I have a very repeatable, documented process for others on our team to follow to easily add a new icon in and it 'just works':)

Hope this helps!