目前位置: 首頁 > Ecshop 綜合文章 > 為導航欄增加漂亮的 font icon

為導航欄增加漂亮的 font icon 超大 稍大 微大

發表於: 2020-07-24 最後更新: 最後更新時間:2020-08-22
自從 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} -->
完成後大概類似這樣
為導航欄增加漂亮的 font icon

為導航欄增加漂亮的 font icon
如果還沒安裝字型圖示外掛請先下載並解壓縮,然後將css和webfonts兩個目錄上傳至模板目錄內,然後在page_header.lbi最前面加入
<link rel="stylesheet" href="css/all.min.css">
您必須先 登入 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2020-08-22