在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
}
最简单的方法是直接使用官方提供的cdn,在你的html页面里添加:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
代码样式如下:
<i class="fa fa-camera-retro fa-lg"></i>fa-lg
<i class="fa fa-camera-retro fa-2x"></i>fa-2x
<i class="fa fa-camera-retro fa-3x"></i>fa-3x
<i class="fa fa-camera-retro fa-4x"></i>fa-4x
<i class="fa fa-camera-retro fa-5x"></i>fa-5x
bootstrap引用图标的方法:
1、下载包并解压
在‘elegant_font’文件夹中会发现“HTML CSS”子文件夹,把它复制到你的项目中(注意,这里可以重命名哦)
2、将连接添加到‘style.css’,html里添加一个图标,内容如下:
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<link rel="stylesheet" href="path/to/elegant-font/style.css">
可以在你HTML里添加图标,并且使用CSS来更改它们的样式:
<span aria-hidden="true" class="icon_pencil"></span>
以下是导入的矢量图标:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)