FastWeb 字型圖示

  字型圖示是在字型檔案中置入圖示，使用對應的名稱就可引入相應的圖示。

  字型圖示相對於傳統的圖片圖示，有以下優勢：

• 用CSS控制樣式：可以使用CSS來控制圖示的字型顏色，大小，陰影等。
• 無限縮放：採用向量圖構造，每個圖示都可以自由進行放大或縮小操作，讓每個圖示在進行放大或者縮小操作時看起來都顯示正常。
• 高清顯示支援：由於其圖示的特性，在高解析度的螢幕上也能完美呈現。

  如需要了解所有的圖示型別，點選https://fontawesome.com/v4.7/icons/ (opens new window)檢視所有可用的圖示。

1. 在FastWeb中使用字型圖示

  FastWeb中也有部分控制元件與功能支援字型圖示的顯示。

1.1. 功能表列表中字型圖示的支援

  FastWeb的功能表也支援字型圖示的顯示。點選[系統工具]-[功能表列表]，打開的功能表列表中可以看到功能表圖示的字樣，此處的功能表圖示表示可以使用字型圖示的名稱，在功能表欄中引入對應的圖示。

  假設我們在系統管理的功能表欄設定中修改功能表圖示名稱為cog后，重新整理並重新登錄檢視。

  可以注意到系統管理的功能表圖示顯示為齒輪狀。

1.2. 控制元件中的字型圖示支援

  FastWeb中帶有ImageIndex與Images屬性的控制元件除了支援傳統的圖片圖示外，還支援字型圖示樣式的引入。使用TUgIconClsList可引入對字型圖示的支援，以下以TUgButton為例進行說明。

  按照FastWeb快速上手為例建立模組進入至模組編輯頁面，在界面上放置一個TUgIconClsList與TUgButton，雙擊UgIconClsList，打開字型圖示列表編輯界面，可以在其中輸入字型圖示的名稱。

  在輸入名稱后可以看到圖示的最終顯示效果。

  在UgButton01中設定ImageIndex屬性為0，Images設定為UGIconClsList01。

  設定完后，可以看到按鈕上顯示序號為0對應的圖示（齒輪）。

2. 在FastWeb中匯入自定義字型圖示

  FastWeb中也支援匯入自定義的字型圖示。此次說明我們以IconFont (opens new window)為例介紹如何在其中引入字型圖示。

  首先，在IconFont中註冊並登錄。

  點選圖示，進入專案界面。

  然後點右上方紅色的新建專案的按鈕，填寫專案名稱即可完成新建專案。

  然後新增圖示，直接在搜索欄搜索需要的圖示 ，例如搜索主頁：

  然後滑鼠放到想要的圖示上，點選購物車圖示加入收藏。然後點選右上角的購物車。

  點選新增至專案，選擇剛才新建的專案。

  新增完成後，會自動跳轉到專案列表的界面，然後切換到Font class分類，點選下載。

  下載完壓縮包，此處需要工具unitools，將自定義的字型將unigui自帶的圖示字型替換掉。

  打開工具，首先選擇該專案Ext目錄，如果專案沒有指定ExtRoot，則ext目錄為UniGui的安裝目錄。然後選擇剛才下載的壓縮包。即可完成圖示的替換，如下圖：

  此處說明，UniGUi中已經內建了兩個圖示字型。一個是awesome，另一個是pictos，pictos中內建了104個圖示，此工具的作用是，把pictos替換成iconfont的圖示。替換后，原pictos的圖示就不能使用了，介意者慎用。

  替換完成後，可使用控制元件中的字型圖示支援來驗證安裝是否正確。