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