如何制作icon-font小圖標

bigdevil_s 發布于2019-08-29 13:21 / 1415人閱讀

摘要：首先可以去阿里巴巴矢量字體庫中下載你想要的圖標選擇格式為格式。打開這個網站這個樣子的，然后點擊右上角那個如下圖上面有一個紫色的點擊上傳你下好的圖標。鼠標箭頭表示選擇圖標。垃圾桶表示刪除圖標，一般選擇垃圾桶，點一下圖標就可刪除。

1、首先可以去iconfont.cn阿里巴巴矢量字體庫中下載你想要的圖標（選擇格式為SNG
格式）。

2、打開iconmoon這個網站（這個樣子的），然后點擊右上角那個Iconfont App
如下圖:

3、上面有一個紫色的 Import Icons 點擊上傳你下好的 SVG 圖標。

4、上傳好的 SVG 圖標會顯示在下方的 Untitled Set 中，然后選擇上方有個類似筆形狀的圖標，點擊進入編輯。解釋一下上面的選擇器。
。鼠標箭頭 表示 選擇圖標
。垃圾桶 表示 刪除圖標 ，一般選擇垃圾桶， 點一下圖標就可刪除
。十字箭頭 表示 變換位置

5、在編輯中，第一個 Tags 是表示你要查找這個圖標時可以輸入的名字，第二個框輸入的是待會引用代碼時會用到的名字。我創建了花，所以就命名為 flower ，然后關閉編輯器，千萬別點下載。

6、然后點擊右下方的 Generate Font F ，進入后是這個頁面，然后點擊紅圈中的齒輪，進行下一步編輯

7、進入編輯后，需要修改以下內容。

8、Font Name 表示一會兒引入字體需要引入的 樣式名稱
Class Prefix 表示引入樣式的前綴名，如不設置后綴的話，引入的樣式名稱為 icon-flower

9、選擇 Support IE 8 和 Generate preprocessor variables for： Less 和Use a class

然后后面這個框內填寫css需要引入的類名，我就寫了 .wyhicon 這個名稱
10、然后關閉編輯，點擊右下角download下載這個字體。

11、下載完畢后，壓解。修改style.css中的內容

   /* 我們需將下面的url路徑改為引用的fonts文件夾的路徑，根據實際情況修改 */
   @font-face {
   font-family: "wyhicon";
     src:  url("../fonts/wyhicon.eot?q06q0o");
     src:  url("../fonts/wyhicon.eot?q06q0o#iefix") format("embedded-opentype"),
         url("../fonts/wyhicon.ttf?q06q0o") format("truetype"),
         url("../fonts/wyhicon.woff?q06q0o") format("woff"),
         url("../fonts/wyhicon.svg?q06q0o#wyhicon") format("svg");
     ...
   }
   /* 下方這個類中的字體樣式需要加上以下代碼中的font-family */
   .wyhicon {
     font-family: "wyhicon",PingFangSC-Light,"helvetica neue","hiragino sans gb",arial,"microsoft yahei ui","microsoft yahei",simsun,sans-serif !important;
     ...
   }
   .icon-flower:before {
      content: "e900";
   }

也就是在原來的style.css樣式下的.wyhicon下加一條font-family:
"wyhicon",PingFangSC-Light,"helvetica neue","hiragino sans
gb",arial,"microsoft yahei ui","microsoft yahei",simsun,sans-serif
!important;

11、然后在你的html文檔中引用就可以了

云服務器 GPU云服務器如何小程序制作如何制作小程序小程序如何制作小程序如何制作的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112548.html

如何制作icon-font小圖標

摘要：首先可以去阿里巴巴矢量字體庫中下載你想要的圖標選擇格式為格式。打開這個網站這個樣子的，然后點擊右上角那個如下圖上面有一個紫色的點擊上傳你下好的圖標。鼠標箭頭表示選擇圖標。垃圾桶表示刪除圖標，一般選擇垃圾桶，點一下圖標就可刪除。 1、首先可以去iconfont.cn阿里巴巴矢量字體庫中下載你想要的圖標（選擇格式為SNG格式）。 2、打開iconmoon這個網站（這個樣子的），然后點擊右上...

yexiaobai 2019-08-01 17:32 評論0 收藏0
[盤點]項目中可以怎么優化圖片

摘要：雪碧圖雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應的圖片即可。除此之外，使用雪碧圖，有兩個個注意地方不要把頁面所有的圖片都合并，比如把整合會破壞的語義結構。看似平常的事物，往往會蘊含的巨大的智慧。把看似平常的事物簡單做好，可能很正常。如果能把平常的事物做精，做細，這個不平常。 1.前言每一個開發者在開發項目中，不可避免要和圖片打交道...

lykops 2019-08-23 13:41 評論0 收藏0
[盤點]項目中可以怎么優化圖片

摘要：雪碧圖雪碧圖就是把很多小的圖整合到一起，制作成一張比較大的圖，然后作為元素的背景圖片使用，定位到相應的圖片即可。除此之外，使用雪碧圖，有兩個個注意地方不要把頁面所有的圖片都合并，比如把整合會破壞的語義結構。看似平常的事物，往往會蘊含的巨大的智慧。把看似平常的事物簡單做好，可能很正常。如果能把平常的事物做精，做細，這個不平常。 1.前言每一個開發者在開發項目中，不可避免要和圖片打交道...

hedzr 2019-08-02 12:07 評論0 收藏0
制作生成icon-font步驟

摘要：制作生成步驟準備好圖標的文件進入在網頁的右上角找到的按鈕，點擊進入進入之后，將之前準備的的文件在左上角的按鈕上傳上傳之后在頂部菜單選項中點擊筆樣子的按鈕，再點擊上傳的圖標就能夠對其進行修改在修改的界面會有兩個輸入框一個是用來在當前頁面展示制作生成icon-font步驟準備好圖標的SVG文件進入icomoon 在網頁的右上角找到 IcoMoon App 的按鈕，點擊進入進入之...

Jrain 2019-08-30 15:52 評論0 收藏0
制作生成icon-font步驟

摘要：制作生成步驟準備好圖標的文件進入在網頁的右上角找到的按鈕，點擊進入進入之后，將之前準備的的文件在左上角的按鈕上傳上傳之后在頂部菜單選項中點擊筆樣子的按鈕，再點擊上傳的圖標就能夠對其進行修改在修改的界面會有兩個輸入框一個是用來在當前頁面展示制作生成icon-font步驟準備好圖標的SVG文件進入icomoon 在網頁的右上角找到 IcoMoon App 的按鈕，點擊進入進入之...

wqj97 2019-08-01 16:19 評論0 收藏0