如何在HTML中使用图标字体

如何在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

 

 }

最简单的方法是直接使用官方提供的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>

以下是导入的矢量图标:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6280931.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存