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

Question

所以我有一些图标需要在激活时填写。 我正在使用Framework 7，但工具栏中有自定义图像。 （如果有一种方法可以在不使用其他图像的情况下进行填充，那就很好了，否则我已经填写了所有图标的版本）

码：

<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

我还在我的Web应用程序中使用Framework7，并且在工具栏上也有自定义图标。 我完成此操作的方法是只使用字体图标，并为图标添加自己的自定义字体系列类。 那里有很多库，其中包含成千上万的选项供您选择。 我将Fontello用于我的。

这是其中一个图标的屏幕截图，其中两个图标并排处于非活动状态和活动状态：

为了实现这一目标，我去了Fontello网站并获取了我想要的字体图标，然后在我的less文件中创建了图标类：

/* 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";}}

然后，当我想使用该图标类时，我只是将其添加到了我的元素中（这是在React组件（ Framework7-React中 ），因此您必须更改语法以将图标类传递给您的用例，但是您可能会明白这一点）：

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

如果要覆盖任何默认行为，剩下的唯一事情就是应用自己的活动状态颜色。 就我而言，我使用的更少，并且有一个变量，用于存储图标的所有活动状态的颜色：

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

而且由于它是一个字体图标，如果愿意，您甚至可以更进一步，自己调整大小：

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

抱歉，如果这对于您要问的内容来说过于矫kill过正，但是对我来说，当我想添加新图标时，效果很好。 对于我们团队中的其他人，我有一个非常可重复的，有文档记录的流程，可以轻松地在其中添加新图标，并且这种方法“有效”：

希望这可以帮助！