21xrx.com
2024-11-19 04:40:57 Tuesday
登录
  

CSS icons

如何添加图标

将图标添加到HTML页面的最简单方法是使用图标库,比如Font Awesome.

将指定图标类的名称添加到任何内联HTML元素(如<i>或<span>).

下面图标库中的所有图标都是可伸缩的矢量,可以使用CSS(size、color、shadow等)进行个性化设置.

Font Awesome Icons

要使用Font Awesome的图标,请在HTML页面的<head>部分中添加以下行:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

注意:不需要下载或安装!

例子

结果:

Font Awesome图标的全部参考,请访问我们的Icon 参考.

Bootstrap Icons

若要使用Bootstrap glyphicons图标,请在HTML页面的<head>部分中添加以下行:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

注意:不需要下载或安装!

例子

结果:

Google Icons

要使用Google的图标,请在HTML页面的<head>部分中添加以下行:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意:不需要下载或安装!

例子

结果:

cloud favorite attachment computer traffic

有关所有图标的完整列表,请访问我们的Icon教程.

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2