html更改圖像圖標如果活動Framework7

Question

所以我有一些圖標，我需要填寫時，它的活躍。我正在使用框架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網站並搶下字體圖標，我想然後創建了我的圖標班我不太文件：

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

然後，當我想使用圖標類我只是把它添加到我的元素，像這樣（這是一個陣營組件（Framework7-React），所以你將有ch安格了語法圖標類以通爲你的使用情況，但你可能會得到一點）：

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

很抱歉，這是矯枉過正你問什麼，但它的作品了偉大的我，每當我想添加一個新的圖標。我有一個非常可重複的，記錄在案的過程，讓我們團隊中的其他人輕鬆添加一個新圖標，並且它'正常工作':)

希望這有助於！