专栏首页编程微刊Font Awesome 一套绝佳的图标字体库和CSS框架

Font Awesome 一套绝佳的图标字体库和CSS框架

在bootstrap框架的使用中,字体图标必不可少,Font Awesome 一套绝佳的图标字体库和CSS框架,值得学习。

网址:http://fontawesome.dashgame.com/

图片.png

使用示例

1:引入Font Awesome图标文件或者使用使用LESS或SASS的方法来自定义 Font Awesome 4.7.0 。

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。 但实际上使用 <span> 才能更加语义化。

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 font-awesome图标</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp;主页</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; 图书馆</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; 提交申请</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; 设置</a>
</div>

</body>
</html>

效果如下

图片.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • input输入框自动消除空格

    今天遇到了一个问题,用户在在前端的input里面输入id的时候,多写了个空格,数据库里面就找不到id了,所以无法获取输入的id所绑定的标签位置在哪里,现在需要在...

    王小婷
  • 在HTML页面中引入公共的部分的代码

    在做前端网页的时候,会涉及到很多界面,有的时候,这些界面都会有重复的代码,比如侧边栏菜单的重复代码,头部导航的 重复代码,底部的重复代码,这个时候,为了使每个页...

    王小婷
  • 表格插件-bootstrap table的使用示例

    基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

    王小婷
  • 8.python之面相对象part.3

    在python这门编程语言中,一个类可以去继承一个父类甚至多个父类,只继承一个父类就是单继承,如果一个子类继承了多个父类,那么这就是多继承。原始类被称为“基类”...

    py3study
  • python之装饰器

    装饰器本质上就是一个python闭包函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象。

    刘銮奕
  • Android系统启动之zyogte进程java(上)

    构造函数主要做的事情: 1. 初始化skia图形系统 2. 预先分配空间来存放传入虚拟机的参数 3. 断言判断gCurRuntime是否为空,保证只能被初...

    李小白是一只喵
  • Applet小应用程序之间的通讯

    1、 首先解压:如何运行applet.zip文件,解压后如图

    张泽旭
  • 一文透析腾讯移动办公安全解决方案

    随着移动设备的高速发展,移动办公逐渐成为了现代办公的主流。随时随地用手机完成项目沟通、流程审批、文档传送、通知下发、视频会议等等,大大提升了办公的效率,员工可以...

    腾讯安全
  • 电商雇“黑客” 袭击竞争对手网站

    南通警方破获电商网站流量攻击系列案件,12人被采取刑事强制措施;QQ群“接单”还可学“黑客”技术

    周俊辉
  • 云办公的技术设备要求

    2020 年的工作正式开启,大多数开发者的开工方式是云办公。对开发者来说,云办公意味着什么?如何开始云办公?云办公的发展趋势会怎样?基于此,云加社区联手知乎科技...

    云加社区

扫码关注云+社区

领取腾讯云代金券