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作为我的网络应用程序，并在工具栏上也有自定义图标。我完成这个的方法是只使用字体图标并为我的图标添加我自己的自定义字体系列。有很多库，包含数以千计的选项供您选择。我用Fontello作为我的。

以下是其中一个与非活动状态和活动状态并排的图标的屏幕截图：

为了做到这一点，我去了Fontello网站并抓住了我想要的字体图标，然后在我的文件中创建了我的图标类：

/* 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）中，所以你必须更改语法以传入icon类你的用例，但你可能得到了重点）：

 <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;
}

很抱歉，如果这对你的要求有点过分，但每当我想添加一个新图标时，它对我来说都很有用。对于我们团队中的其他人，我有一个非常可重复的，有文档记录的流程，可以轻松添加一个新图标，并且只是工作＆＃39; :)

希望这有帮助！

如果活动Framework7，html更改图像图标

1 个答案: