html+css实现文字图标

1、首先准备好图标文档文档，可以去相关平台下载相关的文档，文档图标格式有一下4种，因为涉及到不同的浏览媒体，有的是用浏览器有的是用手机以及其他浏览媒体。（.eot   .svg .ttf .woff）

2、打开adobe dreamweaver，并新建html文档。

3、书写css文字图标样式

<style>

@font-face {font-family: "iconfont";

  src: url('iconfont.eot?t=1494811097746'); /* IE9*/

  src: url('iconfont.eot?t=1494811097746#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('iconfont.woff?t=1494811097746') format('woff'), /* chrome, firefox */

  url('iconfont.ttf?t=1494811097746') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

  url('iconfont.svg?t=1494811097746#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

  font-family:"iconfont" !important;

  font-size:16px;

  font-style:normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.icon-shendurz:before { content: "\e65d"; }

</style>

4、书写html

<div class="main markdown"><i class="icon iconfont icon-shendurz"></i></div>

5、浏览器查看效果，这里图标比较小。

6、浏览器修改文字图标样式以及颜色。