首頁 > ECSHOP 相關文章與模板 > Ecshop 綜合文章 > 為導航欄增加漂亮的 font icon

自從 RWD (Responsive Web Design)響應式網頁逐漸成為趨勢後，font icon (字型圖示)也漸漸成為網頁中不可或區的元素，因為 font icon 具有文字的樣式與屬性，無論如何縮放依然清晰漂亮，目前網頁導航欄多數從資料庫獲取導航欄位，再配合模板引擎動態顯示在頁面上，因此我們可以利用 key 鍵值來給每個導航欄位指定不同的 font icon 或指定不同顏色。 以ecshop的中間導航為例

	
		<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
		<a href="{$nav.url}"{if $nav.opennew eq 1} target="_blank" {/if}{if $nav.active eq 1} class="cur"{/if}>
		{$nav.name} </a> 
		<!-- {/foreach} -->

先在循環中增加了 key=key，之後就可以{$key}標籤來取得key值，需要注意的是key值是從0開始的，第一個導航是0而不是1，第二個導航是1...依此類推，底下代碼的意思是:當key值等於0時則icon變數ficon的值為users，而顏色變數fcolor的值為800080，最後再將變數{$ficon}和{$fcolor}嵌入HTML中

		
		<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav key=key} -->
		<!-- {if $key eq 0} -->
		{assign var="ficon" value="users"}
		{assign var="fcolor" value="800080"}
		<!-- {elseif $key eq 1} -->
		{assign var="ficon" value="book-open"}
		{assign var="fcolor" value="007bff"}
		<!-- {elseif $key eq 2} -->
		{assign var="ficon" value="laptop-code"}
		{assign var="fcolor" value="dc3545"}
		<!-- {elseif $key eq 3} -->
		{assign var="ficon" value="hands-helping"}
		{assign var="fcolor" value="00FF00"}
		<!-- {elseif $key eq 4} -->
		{assign var="ficon" value="globe-asia"}
		{assign var="fcolor" value="339900"}
		<!-- {elseif $key eq 5} -->
		{assign var="ficon" value="hospital-user"}
		{assign var="fcolor" value="008080"}
		<!-- {/if} -->
		<li {if $nav.active eq 1} class="on" {/if}>a class="" href="{$nav.url}"><i class="fas fa-{$ficon}"></i> {$nav.name}</a> 
	</li>
<!-- {/foreach} -->

完成後大概類似這樣



如果還沒安裝字型圖示外掛請先下載並解壓縮，然後將css和webfonts兩個目錄上傳至模板目錄內，然後在page_header.lbi最前面加入

<link rel="stylesheet" href="css/all.min.css">

如果你對為導航欄增加漂亮的 font icon有任何問題請到討論區發帖。