如何在HTML中使用图标字体

在html中使用图标字体的方法：

1、创建自己的iconfont，推荐使用iconmoon，使用它可以通过上传SVG或者字体来生成你需要的icon字体，本文在线演示使用iconmoon生成。

步骤1：选择页面提供的或者上传自己的

步骤2：指定字符映射

3、导入到页面使用css：

style.css写法如下：

 @font-face

{

 font-family:

'icomoon'

 src:url('fonts/icomoon.eot')

 src:url('fonts/icomoon.eot?#iefix')

format('embedded-opentype'),

 url('fonts/icomoon.woff')

format('woff'),

 url('fonts/icomoon.ttf')

format('truetype'),

 url('fonts/icomoon.svg#icomoon')

format('svg')

 font-weight:

normal

 font-style:

normal

 }

首先,需要有这么个"图标主体"库 ，其次把这个"图标字体"库,引入html页面是图标字体库对应的css引入html ，最后使用"图标字体"库 具体 *** 作。

1.使用百度搜索“(fontello.com)字体”，然后点击进入该官网，是英文的官网；

2.该网站会根据网速的不同，加载起来有点慢，请耐心等待，打开的网站首页，可以显示很多不同的图标；

3.网友朋友可以根据自己不同的需要，然后选择想要的图标，选定的图标会出现选定属性，如果不需要，再点击一下，就可以取消选择，都选择好之后，点击右上角的下载按钮就可以了；

4.下载字体图标之后，是个压缩包，这时可以直接解压即可，得到字体图标的文件夹；

5.打开该文件夹，可以看到里面的css样式文件、字体文件、html文件以及说明文本文档；

6.点击“demo.html”文件，测试一下，自己想要的字体图标文件是否下载完整，这是打开之后，可以看到我们之前选择的几个字体图标；

7.打开Dreamweaver软件，用该软件打开“demo.html”文件，就可以看到字体图标的代码是如何调用的了；