使用icomoon生成字体图标

  涂世广

    1. 进入:https://icomoon.io/app/#/select
      fdc50744f06f4426bf26275e5d32871f.png

    2. 新建一个图集
      85acf7a1fe4a4edc9c77220266ae04dd.png

    3. 添加.svg图片(可以使用现成的,也可以使用自定义的)
      使用现成的点击页面红色的Add Icons…
      使用自定义的直接拖拽进图集即可添加
      2e01c9fe0bdb4a6ebdcca305f0203ed8.png

    4. 生成字体文件
      (1)选择好要生成的图标(自由选择)
      (2)点击底部的:“Generate Font F”
      96acd04854364331a30243fd29af3c2e.png
      可以自由命名
      504a1ad1269f40bdb25b3c870185e43d.png

    5. 修改完成后,点击生成Font
      561c7e3457da48bb9ee35769ffd9d8dd.png
      下载到压缩文件:
      6e55730d8bf34a51bdfba350138011e4.png
      运用:将fonts文件夹全部内容和style.css文件放到相应的项目中。
      010ab98396b342d7ae03fe775a336ebf.png
      根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。
      当然添加字体还需要设置font-size,也可以根据实际情况设置color改变其颜色。
      f1ff7d77ac6c4901808ec22bc4bd21e7.png