作者 主題: 如何給 ECSHOP 導航欄加上自訂 Font Icon  (閱讀 1524 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
如何給 ECSHOP 導航欄加上自訂 Font Icon
« 於: 四月 09, 2017, 05:14:04 下午 »
當你將 Font Awesome 加入網頁之後便可以在任意位置使用它,對於固定的位置使用上是沒問題的,但對於像導航欄、文章分類或商品分類等必需動態的從資料庫取出資料的選單,就需要稍加修改...

而此修改也非常簡單,因為是字型圖示,所以可以完全當作字型處理(包括大小、顏色...),以 ECSHOP 的自訂義導航欄為例,不管頂部、中間、底部導航操作方法都是一樣

在新增字型圖示之前,請先編輯 includes/lib_main.php 約 1955 行之後找到 get_navigator 函數裡將
代碼: [選擇]
    while ($row = $GLOBALS['db']->fetchRow($res))
    {
        $navlist[$row['type']][] = array(
            'name'      =>  $row['name'],
            'opennew'   =>  $row['opennew'],
            'url'       =>  $row['url'],
            'ctype'     =>  $row['ctype'],
            'cid'       =>  $row['cid'],
            );
    }
改為
代碼: [選擇]
    while ($row = $GLOBALS['db']->fetchRow($res))
    {
        //font-icon
        if (strpos($row['name'], ",")){
            $names = explode(",", $row['name']);
            $nav_name = '<i class="fa fa-'.$names[1].'" aria-hidden="true"></i> '.$names[0];
        }else{
            $nav_name = $row['name'];
        }
        //font-icon
        $navlist[$row['type']][] = array(
            'name'      =>  $nav_name,//font-icon
            'opennew'   =>  $row['opennew'],
            'url'       =>  $row['url'],
            'ctype'     =>  $row['ctype'],
            'cid'       =>  $row['cid'],
            );
    }   
存檔
(底下步驟不加ICON請省略)
以留言板為例,當你在新增或編輯導航欄時,操作一如往昔,唯一不同的是必須先到 Font Awesome 代碼獲取頁面獲取代碼,只需複製類似下圖選取的區域即可,也就是忽略 i class="fa fa-" aria-hidden="true" 只複製 commenting 即可


回到導航欄在名稱之後先加上一個半形逗號作為區隔,然後貼上剛複製的代碼(commenting),如果你想加上自己的CSS,記得先加空格下圖(text-warning用來指定ICON顏色):


按下確定之後再到前台看看

LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php