自定义字体图标

• 字体图标生成网站

  • icomoon.io,点击icoMoon App
  • 选择已有的图标或者自己上传图片
  • 点击Generate Font生成字体然后Download进行下载
  • 下载后进行解压
  • 将解压后的fonts文件夹放入项目静态文件中

• 使用

  • 将字体图标引入进来

    • /*
      		 * 字体图标
      		 */
      		@font-face {
      			font-family: lk;
      			src: url('./fonts/iconmoon.eot') format('embedded-opentype'),
      			url('./fonts/iconmoon.svg') format('svg'),
      			url('./fonts/iconmoon.ttf') format('truetype'),
      			url('./fonts/iconmoon.woff') format('woff');
      		}
      		
      		[class^="icon-"],
      		[class*="icon-"]{
      			font-family: lk;
      			font-style: normal;
      		}
      

  • 打开解压后的demo.html每一个图标下面都有一个编码

  • 在项目中去定义自己的图标,content后面的编码就是demo.html中的编码

    • .icon-home::before{
      			content: '\e900';
      			font-size: 16px;
      		}
      		.icon-pen::before{
      			content: '\e908';
      			font-size: 16px;
      		}
      

  • 代码引用

    • <i class="icon-home"></i>
      <i class="icon-pen"></i>
      <i class="icon-pencil2"></i>
      

就这样我们就可以自定义自己的图标库了！