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、浏览器修改文字图标样式以及颜色。
