`

Bootstrap FontAwesome的图标字体

阅读更多
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FontAwesome为Bootstrap而创造的图标字体</title>
<style type="text/css">
ul li{ list-style:none;}
ul li a{ color:#333;}
</style>
<link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<ul>
    <li><a href="###"><i class="fa fa-life-ring"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;<i class="fa fa-angle-right"></i></a></li>
    <li><a href="###"><i class="fa fa-leaf"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;<i class="fa fa-angle-right"></i></a></li>
    <li><a href="###"><i class="fa fa-medkit"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;<i class="fa fa-angle-right"></i></a></li>
    <br>
    <li><a href="###"><i class="fa fa-flag fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-camera-retro fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-ship fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-venus fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-file-image-o fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-spinner fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-check-square fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-credit-card fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-pie-chart fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-won fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-file-text-o fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-arrow-right fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-play-circle fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-github fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
    <li><a href="###"><i class="fa fa-medkit fa-fw"></i>&nbsp;阅谁问君诵,水落清香浮&nbsp;</a></li>
</ul>
</body>
</html>

 

官网下载:http://fontawesome.io/

 

效果图:

 

 

 

  • 大小: 48.3 KB
2
2
分享到:
评论

相关推荐

    Bootstrap 使用Font Awesome图标字体文件,集成了圆角按钮,禁用状态按钮,自定义按钮尺寸,可设定按钮动画,旋转和闪烁动画。

    Bootstrap 使用Font Awesome图标字体文件 集成了圆角按钮 禁用状态按钮 自定义按钮尺寸 可设定按钮动画 旋转和闪烁动画 ps:字体文件在asset里面 说的不是很明白 看下面英文解释吧 Bootstrap buttons as per ...

    FontAwesome图标字体和CSS框架

    **FontAwesome图标字体与CSS框架详解** 在Web开发中,图标是一种不可或缺的设计元素,它们能够以直观的方式传达信息,增强用户体验。Font Awesome(简称FontAwesome)就是这样一套强大的图标解决方案,它将图标设计...

    font-awesome-4.7.0 图标库

    然而,开发者经常在GitHub项目页面或自定义的GitHub个人主页中使用Font Awesome图标,以增加视觉吸引力和用户体验。例如,可以使用Font Awesome的图标来表示编程语言、社交链接、开源许可证等信息。 总结,Font ...

    最新font awesome 图标展示

    `font-awesome-4.1.0`可能是一个包含了Font Awesome 4.1.0版本的文件夹,里面可能包含了字体文件(如`.eot`, `.svg`, `.ttf`, `.woff`, `.woff2`等)以及CSS样式文件,用于在网页中引入这些图标。`css`文件夹可能...

    FontAwesome-pro-5.12.0-web

    《FontAwesome 5.12.0 Web版:图标库的艺术与应用》 FontAwesome,作为一款广泛应用的图标库,深受前端开发者喜爱。其5.12.0版本的发布,不仅延续了其一贯的高质量和易用性,还带来了更多的图标选择和功能优化,...

    fontawesome 6.1 pro

    Fontawesome 6.1 Pro是一款深受开发者和设计师喜爱的图标库,它提供了丰富的矢量图标、字体和CSS工具,使得在网页设计和开发过程中轻松添加和定制图标成为可能。这个专业版包含了更多高级特性和图标,旨在提升用户...

    FontAwesome4.4.0图标字体元件库

    安装字体文件之后打开Axure,从字体列表中能够找到fontawesome即为安装成功。 3、我使用了字体文件,原型发给别人为什么看不到图标? 解决办法1:对方也安装该字体文件。(无需网络) 解决办法2:在AxureRP7.0中...

    font-awesome-4.4.0

    由于Font Awesome与Bootstrap框架兼容,因此在Bootstrap项目中使用Font Awesome图标特别方便,可以快速构建具有视觉吸引力的界面元素。 9. **自定义字体文件:** 如果4.4.0版本的图标库无法满足需求,用户还可以...

    font-awesome-4.7.0.zip

    《Font Awesome 4.7.0:图标字体的利器》 Font Awesome,作为一个广受欢迎的图标库,为网页设计和开发提供了丰富的图标资源。在4.7.0这个版本中,它延续了其一贯的强大功能和易用性,使得开发者能够轻松地在网页上...

    bootstrap文件及bootstrap图标大全

    在Bootstrap 3.3.7中,可能包含`font-awesome.css`或`font-awesome.min.css`文件,以及字体文件,如`.eot`, `.svg`, `.ttf`, `.woff`, 和 `.woff2`,这些字体文件包含了各种图标。 5. **Demo HTML文件**:`demo....

    基于Font Awesome图标选项卡特效.zip

    【标题】"基于Font Awesome图标选项卡特效"是一款利用Font Awesome图标库和Bootstrap选项卡功能进行结合,通过CSS样式增强视觉效果的网页组件。在网页设计中,选项卡是一种常见的界面元素,它允许用户在有限的空间内...

    Font Awesome Pro 6 6.1 6.1.1 last 最新版本, 比现有下载里面的都要全面 全网首发

    在实际使用中,设计师和开发者可以通过压缩包中的文件"FontAwesome.Pro.6.1.1"获取所有资源,包括字体文件、CSS样式表和文档。通过正确导入这些文件,可以轻松地将Font Awesome Pro图标集成到自己的项目中,从而提升...

    bootstrap字体图标资源

    Bootstrap的字体图标库主要基于Glyphicons和Font Awesome两个库,它们将一系列图标设计成字体的形式,使得这些图标可以像文字一样被处理。这样,开发者可以轻松地调整图标的大小、颜色、阴影等属性,同时还能利用CSS...

    fontawesome-5.7.2

    5. **CSS和HTML集成**:Fontawesome图标可以很容易地通过CSS类集成到HTML中,这样开发者就可以通过简单的CSS代码添加图标,无需处理图像文件。例如,`&lt;i class="fas fa-camera"&gt;&lt;/i&gt;` 就可以插入一个相机图标。 6. ...

    FontAwesome v4.7字体图标方案.zip

    **FontAwesome 4.7 字体图标方案详解** FontAwesome是一款广泛使用的开源字体图标库,它为开发者提供了大量的矢量图标,可以方便地集成到Web项目中,实现可缩放且一致的显示效果。在版本4.7中,这个库包含了大量的...

    fontawesome-pro-5.6.3

    这个"fontawesome-pro-5.6.3"版本是Font Awesome 的专业版,版本号5.6.3,意味着它包含了该库截至发布时的最新功能和图标。 1. **Font Awesome的性质**: - **图标集**:Font Awesome 提供了超过4845个图标,这些...

    bootstrap4 js,css和font-awesome

    Font Awesome图标可以在Bootstrap的组件中方便地集成,如按钮、导航、表单等,极大地丰富了网页的视觉表现。 4. **响应式设计**: Bootstrap 4的核心特性之一就是响应式设计。它使用媒体查询(Media Queries)来...

    Font Awesome v5.9.0 Pro.zip

    此外,Font Awesome图标是基于字体的,可以像文字一样调整大小和颜色,无需担心图像处理的问题。 在v5.9.0 Pro版本中,包含了大量的图标集,覆盖了各种类别,如社交媒体、文件类型、箭头、导航、用户界面元素等。...

Global site tag (gtag.js) - Google Analytics