国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

制作生成icon-font步驟

wqj97 / 1114人閱讀

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

制作生成icon-font步驟

準備好圖標的SVG文件

進入icomoon

在網(wǎng)頁的右上角找到 IcoMoon App 的按鈕，點擊進入

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

上傳之后在頂部菜單選項中點擊 筆 樣子的按鈕，再點擊上傳的圖標就能夠?qū)ζ溥M行修改;

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

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

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

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文件夾的路徑，根據(jù)實際情況修改 */
   @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";
   }

然后就可以拿來用啦

// 首先需要引入

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50444.html

相關文章

  • 制作生成icon-font步驟

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

    Jrain 評論0 收藏0

  • 如何制作icon-font小圖標

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

    yexiaobai 評論0 收藏0

  • 如何制作icon-font小圖標

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

    bigdevil_s 評論0 收藏0

  • [盤點]項目中可以怎么優(yōu)化圖片

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

    lykops 評論0 收藏0

  • [盤點]項目中可以怎么優(yōu)化圖片

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

    hedzr 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<