如何在HTML中使用图标字体
①首先，需要有这么个"图标主体"库
②其次，把这个"图标字体"库,引入html页面(是图标字体库对应的css引入html)
③最后，使用"图标字体"库
具体操作：
制作"图标字体"：
①这里以http://www.iconfont.cn为例子，来制作:
首先，打开网址后，页面右侧有登录按钮，先进行登录操作(后面会说明外面为什么选择登录，也可以不登录。但我还是建议登录。)
②制作图标，这个制作的图标是要svg格式的可以找自己公司的设计师去设计，也可以在里面的图标库搜索自己需要的图标的名称，比如"首页，分类"等。
③ 点击自己选择的首页和分类，它会在这个位置出现：
④然后点击下载到本地，就自动下载一个叫"iconfont.zip"的压缩包。这个就是图标字体库。解压这个压缩包可以发现有这些文件：
1部分是指图标内容，可以忽略，但不能删除
2部分是指图标css，不能删除
3部分是使用图标的示例dome，可以删除(建议保留)
⑤使用图标：
打开dome.html,在浏览器中可以看到，相关的下载的图标，以及如何使用。这里可以我提一下，使用图标有2中方式，1是以内容的形式使用，2是以css 的形式使用：
博思aippt
2024-07-20 广告
首先,需要有这么个"图标主体"库 ，其次把这个"图标字体"库,引入html页面是图标字体库对应的css引入html ，最后使用"图标字体"库 具体操作。
1.使用百度搜索“(fontello.com)字体”，然后点击进入该官网，是英文的官网；
2.该网站会根据网速的不同，加载起来有点慢，请耐心等待，打开的网站首页，可以显示很多不同的图标；
3.网友朋友可以根据自己不同的需要，然后选择想要的图标，选定的图标会出现选定属性，如果不需要，再点击一下，就可以取消选择，都选择好之后，点击右上角的下载按钮就可以了；
4.下载字体图标之后，是个压缩包，这时可以直接解压即可，得到字体图标的文件夹；
5.打开该文件夹，可以看到里面的css样式文件、字体文件、html文件以及说明文本文档；
6.点击“demo.html”文件，测试一下，自己想要的字体图标文件是否下载完整，这是打开之后，可以看到我们之前选择的几个字体图标；
7.打开Dreamweaver软件，用该软件打开“demo.html”文件，就可以看到字体图标的代码是如何调用的了；
你可以引用bootstrap框架，然后里面有自带的一些图标字体，引用的时候要引用它的样式喔。
也可以百度阿里矢量图，点击导航栏那的图标库，可以搜索，也可以慢慢找，然后将自己想要的图标加入购物车，下载，下载完成后里面有个.html的文件，你可以查看一下，里面有教你如何引用你下载的图标的步骤。
1.自由的变化大小
2.自由的修改颜色
3.添加阴影效果
4.IE6也可以支持
5.支持图片图标的其它属性，例如，透明度和旋转等等
6.可以添加text-stroke和background-clip:text等属性，只要浏览器支持
如何使用？
文字修饰：
<h3>
<span aria-hidden="true" data-icon="⇝"></span>
Stats
</h3>
[data-icon]:before {
font-family: icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
单独图标：
<a href="#" class="icon-alone">
<span aria-hidden="true" data-icon="▨"></span>
<span class="screen-reader-text">RSS</span>
</a>
/* Same CSS as above, plus */
.icon-alone {
display: inline-block; /* Chrome 19 was weird with clickability without this */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
position: absolute;
top: -9999px;
left: -9999px;
}
