1. 程式人生 > >【原創】1.1關於阿裏圖標引用問題簡介

【原創】1.1關於阿裏圖標引用問題簡介

引入 創建 查看 壓縮 http 離線 復制 -1 選項

一、阿裏字體離線應用步驟:

  1、訪問阿裏字體庫,將需要的圖標添加至自己創建指定的項目;

  2、下載至本地;

  3、解壓縮,新建css、font文件夾,將相應的文件夾復制粘貼到對應路徑,如圖所示:


技術分享

  

    放入指定文件夾:


技術分享


  4.link引入css外部樣式表

二、在線阿裏字體引用步驟

  1、使用賬號登錄阿裏字體,選擇需要的圖標放入購物車樣式的圖標中,選擇“添加至項目”選項

技術分享

  2、按照如下圖所示步驟添加至項目


技術分享


  3、“查看在線鏈接”→生成在線代碼


技術分享

  4、復制,粘貼至css樣式表

技術分享

  5、編輯html文件

技術分享

  復制圖標代碼,添加至html文件的 i 標簽中

技術分享

    完整樣例代碼如上,①標記處類名可自取(盡量不要取關鍵字)

  6、代碼運行結果如下:


技術分享

    個人親測所得,如有不足之處,請多指教。(若轉載請註明出處)

【原創】1.1關於阿裏圖標引用問題簡介