iconfont的使用,阿里向量相簿的引用,配置,改變圖示大小和圖示顏色
怎麼使用iconfont
- 首先找到自己想要的圖示,新增到購物車
- 如果你只要一個圖示的話,或者確保之後這個專案不需要其他的圖示的話,可以直接選擇下載程式碼,但是你有多個圖示的話,最好選擇新增至專案
- 無論是新增專案還是直接下載程式碼,下載之後會有一個download.zip包,解壓之後的檔案如下圖,前面四個檔案就是官網的demo沒有用的,後面五個才是有用的
現在請把iconfont.css放在你常用的css檔案目錄下,iconfont.eot/svg/ttf/woff 這四個檔案可以放在fonts檔案下面(檔案位置不重要)。但是注意css裡面有引入這四個檔案的地方,所以檔案路徑請注意。
- 如果你只是想使用標籤引入小圖示的話<i class='iconfont icon-xxx'></i>就行了,如果class裡面少了iconfont,就會出現繁體字,所以一定要記住加iconfont
- 如果要使用svg引入的話,那麼就一定要引入iconfont.js檔案了,這樣子就可以任意的改變圖示的樣式了,比如顏色。大小,本來我貪方便直接用標籤,但是想改變顏色一直不知道怎麼辦。。。。,
接下來說如何改變大小?
- 直接在.icon裡面新增一個樣式font-size就行了
- svg是通過path裡面的fill來改變顏色的,如果這個圖示本身是沒有顏色的,那麼在.icon這個類裡面把fill:red,就行了,但是如果這個圖示原本就是有顏色的,那麼這麼改就起不到作用了,就要改iconfont.js裡面的path,它是一個個對應下來的,只要改了fill裡面的顏色,那麼圖示的顏色就對應的改了