Icon的制作

字体文件生成网站

1.国外 https://www.icomoon.io/
2.国内 http://www.iconfont.cn/

生成字体文件(以icomoon为例)

1.进入官网–>选择IcoMoonApp–>点击进入
Icon的制作_第1张图片
2选择需要制作的iocn–>点击左下角的制作字体文件
Icon的制作_第2张图片
3.自定义class的名称
Icon的制作_第3张图片
4.点击右下角的Download下载字体文件

将字体文件加入到css中,通过添加class的形式显示制作的图标

1.解压下载的字体文件,得到如图所示的文件
Icon的制作_第4张图片
2.style.css文件存放的对字体的class名称的设置

@font-face {
  font-family: 'icomoon';
  // url的地址是font文件中文件所在的相对地址
  src:  url('fonts/icomoon.eot?9f1i8z');
  src:  url('fonts/icomoon.eot?9f1i8z#iefix') format('embedded-opentype'),/* IE6-IE8 */
    url('fonts/icomoon.ttf?9f1i8z') format('truetype'),/* chrome、firefox */
    url('fonts/icomoon.woff?9f1i8z') format('woff'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('fonts/icomoon.svg?9f1i8z#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// 通过在页面上添加class="home",生效自作的icon
.icon-home:before {
  content: "\e900";
}
.icon-home2:before {
  content: "\e901";
}

2.font文件件存放生成的字体文件(有四个文件,用来做兼容性的)
Icon的制作_第5张图片
3.index.html展示制作的icon


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>字体文件title>
    <link rel="stylesheet" type="text/css" href="./style.css">
head>
<body>
<div class="box">
  <span class="home">span>
  <span class="home2">span>
div>

body>

html>

你可能感兴趣的:(CSS)