Quantcast
Channel: 網頁資源 –梅問題.教學網
Viewing all articles
Browse latest Browse all 164

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

$
0
0
梅問題-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圖示公開分享給大家下載使用

Viewing all articles
Browse latest Browse all 164

Trending Articles