CSS文字图标的下载和使用

CSS文字图标的下载和使用

两个主要的网站

1.国外网站 — IcoMoon.
2.国内网站 — Iconfont

下载方式（以IcoMoon为例）

• 点击右上角 IcoMoon App
  
• 点击图标即可选中，也可在页面最下方点击Add Icons From Library查看更多图标
  
  
• 可通过上方画笔(Edit)按钮编辑图标，进行旋转等操作
  
• 选择完后点击右下方Generate Font ----- Download
  
  

使用方式

• 解压缩,所有的文件都不要删
  
• 将style.css文件中的@font-face部分粘贴到所写的CSS文件中

/* 声明字体图标 */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?9s1z4u');
  src:  url('fonts/icomoon.eot?9s1z4u#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?9s1z4u') format('truetype'),
    url('fonts/icomoon.woff?9s1z4u') format('woff'),
    url('fonts/icomoon.svg?9s1z4u#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

• 将名为font文件夹复制到项目index.html文件所在的文件夹中,
  
• 编写CSS，例如

div::after {
	content: '\e906'; /* 要加反斜杠进行转义，内容取决于你想用的字体图标的编号 */
	font-family: 'icomoon'; /* 取决于@font-face部分的font-family */
}

• 通过下载的文件夹中的demo.html可查看对应图标的编号