html 如果 Framework7 处于活动状态，则更改图像图标

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

我也在为我的网络应用程序使用 Framework7，并且在工具栏上也有自定义图标。我实现这一点的方法是只使用字体图标并为我的图标添加我自己的自定义字体系列 class。有很多库包含数以千计的选项供您选择。我用 Fontello 做我的。

这是其中一个并排显示非活动状态和活动状态的图标的屏幕截图：

为了实现这一点，我访问了 Fontello 网站并抓取了我想要的字体图标，然后在我的 less 文件中创建了我的图标 classes:

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

然后当我想使用那个图标时 class 我只是像这样将它添加到我的元素中（这是在 React 组件中 (Framework7-React) 所以你必须改变语法为您的用例传递图标 class，但您可能明白了）：

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

如果您想覆盖任何默认行为，唯一剩下的就是应用您自己的活动状态颜色。在我的例子中，我使用 less 并有一个变量，我将我的颜色存储在我所有图标的活动状态中：

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

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

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

抱歉，如果这对您的要求有点矫枉过正，但每当我想添加新图标时，它对我来说都非常有用。我有一个非常可重复的记录流程供我们团队中的其他人遵循以轻松添加新图标 'just works':)

希望对您有所帮助！

html 如果 Framework7 处于活动状态，则更改图像图标

html change image icon if active Framework7

html

javascript

css

jquery

html-framework-7