1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. PrestaShop 購物平台將自家ICON圖示公開分享給大家下載使用

PrestaShop 購物平台將自家ICON圖示公開分享給大家下載使用

2015/10/01

梅問題-PrestaShop購物平台將自家ICON圖示公開分享給大家下載使用

  說到購物平台,除了梅干先前常用的Opencart外,PrestaShop也是一套免費的購物平台,其性質與WordPress有點類似,除了可將它的程式下載回來,安裝在自己的平台中外,也可直接線上申請使用它的服務,而這麼佛心的網站,最近將自家的ICON圖示,公開分享給大家下載與使用,且用自行運用在自己的專案上以外,還可自行的編輯與修改圖示,而介紹過許多免費可商用的ICON圖示,這款PrestaShop Icon Pack則比較偏向購物類,當然除了購物也有其它常用的圖示,因此有在製作購物網站的朋友,這款圖示絕不容錯過喔!


PrestaShop Icon Pack:

網站名稱:PrestaShop Icon Pack
連結網址:http://build.prestashop.com/icon-pack/

Step1

當進入PrestaShop的網站後,點下方的藍色DOWNLOAD鈕。

梅問題-PrestaShop購物平台將自家ICON圖示公開分享給大家下載使用


Step2

接著會轉到GitHub的網站,再點右邊的Download ZIP鈕,就可將圖示給下載回來囉!
梅問題-PrestaShop購物平台將自家ICON圖示公開分享給大家下載使用


Step3

當下載回來,解壓縮後,分別會看到以下的資料,而在fonts資料夾中,分別提供了eot、svg、ttf、woff….等檔案,因此透過svg的格式,更方便使用者自行修改。

梅問題-PrestaShop購物平台將自家ICON圖示公開分享給大家下載使用


Step4

接著在要開始使用時,再回到PrestaShop的網站,點右上角的Documentation,將會切換到所有圖示的名稱,但並非直接複製此名稱就能使用喔!

梅問題-PrestaShop購物平台將自家ICON圖示公開分享給大家下載使用


Step5

首先,先將css的部分引用到自己的網頁中,接著在圖示的部分,要特別注意到,當剛剛網頁中的圖示名稱,複製之後,前方要再加icon-xxxx這樣才能使用喔!否則會無法顯示,同時可再自行命名一組類別,來設定此圖示的大小與顏色,因此身為網頁設計師的你,也趕快來下載囉!

梅問題-PrestaShop購物平台將自家ICON圖示公開分享給大家下載使用