【01】iconfont的使用

我以前由於項目用bootstrap比較多,因此使用font awesome字體圖標比較多,後來接觸到了iconfont,發現想要的什麼圖標都有,還能夠自定義圖標,很是強大!以前看了一波教程,以爲繁瑣,本身弄明白後感受如此簡單,作了這麼個簡單教程,直接上圖,簡單粗暴,避免新手走彎路,這裏講解的默認是元素使用類名;

step 1:百度iconfont,找到阿里巴巴矢量圖標庫官網,而後註冊登陸,或者用github登陸也行,此步驟跳過;

step 2:找到圖標管理->個人項目->而後新建項目:

右邊點擊新建項目,用於保存本身經常使用的圖標;

step 3:項目新建完成後,往項目裏添加咱們要想使用的圖標,找到圖標庫,搜索一個想要的圖標,而後添加到購物車;

 

 我如今將第一個安卓圖標加入個人項目,點擊加入購物車

step 4:添加到購物車完成後,購物車徽章數字應該顯示1了,點擊右上角的購物車圖標,選擇添加至項目,選擇咱們剛剛建立的項目,肯定;

自動跳轉到對應的項目裏了,如圖:

step 5:接下來一部比較關鍵,將打包好的字體文件下載到本地添加到你的項目中,在項目中引用文件中的iconfont.css文件;

下載下來解壓後的文件以下:

強調一次,直接把這些文件都放在一個文件夾內放在你的項目目錄中,而後在你的項目中引入iconfont.css文件;

 

step 6:到了最後一步了,如何在項目中使用字體圖標呢,其實很簡單,建立一個i標籤或者span標籤,添加一個兩個類名,一個固定的是iconfont,另外一個是你想要的那個圖標對應的類名:

具體代碼以下:

好了,刷新頁面,圖標是否是出來了呢?

Ok,到這一步,恭喜你成功了,是否是很簡單,不簡單?那就從頭再看一遍;

調節字體圖標的大小是經過元素的font-size屬性來控制的;

轉：http://www.cnblogs.com/hjvsdr/p/6639649.html