制作生成icon-font步驟

Jrain 發布于2019-08-30 15:52 / 1493人閱讀

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

制作生成icon-font步驟

準備好圖標的SVG文件

進入icomoon

在網頁的右上角找到 IcoMoon App 的按鈕，點擊進入

進入之后，將之前準備的Icon的SVG文件在左上角的 Import Icons 按鈕上傳

上傳之后在頂部菜單選項中點擊筆樣子的按鈕，再點擊上傳的圖標就能夠對其進行修改;

在修改的界面會有兩個輸入框一個是 Tags (用來在當前頁面展示和搜索的)，另一個是 Names (用來命名你的這個圖標的，也就是下載之后樣式表之中真正使用的)

完成所有圖標的設置之后，頁面下方有三個按鈕，點擊 Generate Font

這里就是展示剛才設置的圖標信息，檢查對比之后如果沒有問題，就點擊頁面下方的剛才點擊的那個菜單下方的 Download 側邊的一個齒輪按鈕進行最后的設置

Font Name 設置你喜歡的名稱，這個會作為IconFont字體的名字 zzwicon

Class Prefix 這個會成為字體類的前綴 icon-

多選框選擇 Support IE8 和 Generate preprocessor variables for: less

CSS Selector 單選框選擇 Use a class 并在輸入框中輸入一個類名 .zzwicon

其余設置按照自己喜歡的來設置，關閉設置彈窗，點擊 Download 下載

將下載文件解壓，使用其中的 style.css 文件，以及 fonts 文件夾

在 style.css 文件中需要修改一些東西

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

然后就可以拿來用啦

// 首先需要引入

// 然后可以在你需要用的地方使用上剛才的那些類名

GPU云服務器云服務器網頁制作步驟制作表格的步驟在線制作表情包生成器配置步驟

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

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

制作生成icon-font步驟

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

wqj97 2019-08-01 16:19 評論0 收藏0
如何制作icon-font小圖標

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

yexiaobai 2019-08-01 17:32 評論0 收藏0
如何制作icon-font小圖標

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

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

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

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

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

hedzr 2019-08-02 12:07 評論0 收藏0