Ecshop 專用響應式模板特價中:5800

網址自動快速安裝,完全不須手動修改,HTML5+CSS3+Bootstrap4+Font Awesome5,依照設備多圖顯示與支援手指撥動的廣告輪播,自動適應設備寬度,提供免費局部修改支援,手機與PC內容一致,維護容易節省成本【響應式模板展示
目前位置: 首頁 > Ecshop 綜合文章 > 為導航欄增加漂亮的 font icon

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

Ecshop For PHP7.3::繁體中文全支援-原來如此 By we-shop.net 發表於: 2020-07-24 最後更新: 現在時間:2020-08-05 09:33:07
自從 RWD (Responsive Web Design)響應式網頁逐漸成為趨勢後,font icon (字型圖示)也漸漸成為網頁中不可或區的元素,因為 font icon 具有文字的樣式與屬性,無論如何縮放依然清晰漂亮,目前網頁導航欄多數從資料庫獲取導航欄位,再配合模板引擎動態顯示在頁面上,因此我們可以利用 key 鍵值來給每個導航欄位指定不同的 font icon 或指定不同顏色。 以ecshop的中間導航為例
	
		
			{$nav.name}
		
 
先在循環中增加了 key=key,之後就可以{$key}標籤來取得key值,需要注意的是key值是從0開始的,第一個導航是0而不是1,第二個導航是1...依此類推,底下代碼的意思是:當key值等於0時則icon變數ficon的值為users,而顏色變數fcolor的值為800080,最後再將變數{$ficon}和{$fcolor}嵌入HTML中
		
		
		{assign var="ficon" value="users"}
		{assign var="fcolor" value="800080"}
		
		{assign var="ficon" value="book-open"}
		{assign var="fcolor" value="007bff"}
		
		{assign var="ficon" value="laptop-code"}
		{assign var="fcolor" value="dc3545"}
		
		{assign var="ficon" value="hands-helping"}
		{assign var="fcolor" value="00FF00"}
		
		{assign var="ficon" value="globe-asia"}
		{assign var="fcolor" value="339900"}
		
		{assign var="ficon" value="hospital-user"}
		{assign var="fcolor" value="008080"}
		
		
  • {$nav.name}
  • 完成後大概類似這樣
    為導航欄增加漂亮的 font icon

    為導航欄增加漂亮的 font icon
    如果還沒安裝字型圖示外掛請先下載並解壓縮,然後將css和webfonts兩個目錄上傳至模板目錄內,然後在style.css最前面加入
    	@import url("css/all.min.css");
    
    本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2020-08-05 09:33:07