成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

制作生成icon-font步驟

Jrain / 1502人閱讀

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

制作生成icon-font步驟

準(zhǔn)備好圖標(biāo)的SVG文件

進(jìn)入icomoon

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

進(jìn)入之后，將之前準(zhǔn)備的Icon的SVG文件在左上角的 Import Icons 按鈕上傳

上傳之后在頂部菜單選項(xiàng)中點(diǎn)擊 筆 樣子的按鈕，再點(diǎn)擊上傳的圖標(biāo)就能夠?qū)ζ溥M(jìn)行修改;

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

完成所有圖標(biāo)的設(shè)置之后，頁面下方有三個按鈕，點(diǎn)擊 Generate Font

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

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

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

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

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

其余設(shè)置按照自己喜歡的來設(shè)置，關(guān)閉設(shè)置彈窗，點(diǎn)擊 Download 下載

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

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

   /* 我們需將下面的url路徑改為引用的fonts文件夾的路徑，根據(jù)實(shí)際情況修改 */
   @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";
   }

然后就可以拿來用啦

// 首先需要引入

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116470.html

相關(guān)文章

  • 制作生成icon-font步驟

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

    wqj97 評論0 收藏0

  • 如何制作icon-font小圖標(biāo)

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

    yexiaobai 評論0 收藏0

  • 如何制作icon-font小圖標(biāo)

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

    bigdevil_s 評論0 收藏0

  • [盤點(diǎn)]項(xiàng)目中可以怎么優(yōu)化圖片

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

    lykops 評論0 收藏0

  • [盤點(diǎn)]項(xiàng)目中可以怎么優(yōu)化圖片

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

    hedzr 評論0 收藏0

發(fā)表評論

0條評論

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