如何在HTML中使用图标字体

html-css012

如何在HTML中使用图标字体,第1张

在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”文件,就可以看到字体图标的代码是如何调用的了;