Font Awesome

fa是什么?

图标字体库和CSS框架

怎么用?

<link

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

有哪些可用?

范例?

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome 图标</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>

<body>

<h1>fa fa-address-card-o</h1>

<i class="fa fa-address-card-o"></i>

<i class="fa fa-address-card-o" style="font-size:24px"></i>

<i class="fa fa-address-card-o" style="font-size:36px"></i>

<i class="fa fa-address-card-o" style="font-size:48px;color:red"></i>

<br>

<p>按钮中使用:</p>

<button style="font-size:24px">

按钮

<i class="fa fa-address-card-o"></i>

</button>

<p>Unicode:</p>

<i style="font-size:24px" class="fa">&#xf2bc</i>

</body>

</html>

参考:

http://www.runoob.com/font-awesome/fontawesome-tutorial.html

http://www.runoob.com/font-awesome/fontawesome-reference.html

;

font awesome (图标字体库)的更多相关文章

  1. Font Awesome图标字体库（2015年05月25日）

    Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...

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

    http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Font A ...

  3. 【css】最近使用的两种图标字体库

    ## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...

  4. Android 使用图标字体库

    首先,在assets资源文件下放入图标字体库. 我这儿采用的是fontawesome-webfont.ttf 然后, 在安卓中加载这个资源文件 Typeface fontFace = Typeface ...

  5. fontawesome图标字体库组件在服务器上显示不出来图标的解决

    这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...

  6. Font Awesome图标字体应用及相关

    作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...

  7. FontAwesome 图标字体库的使用

    在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库.这里介绍一种常见的图标库——FontAwesome的使用. 1.登录F ...

  8. 图标字体库（用CSS样式生成搜索、购物车等图标）

    参考网址:http://fontawesome.dashgame.com/ 基本图标: 您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称. Font ...

  9. Font Awesome:图标字体，完全CSS控制

    Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...

随机推荐

  1. Android经常使用UI组件 - Button

    button(Button)是Android其中一个经常使用的UI组件.非常小可是在开发中最经常使用到.一般通过与监听器结合使用.从而触发一些特定事件. Button继承了TextView.它的功能就 ...

  2. EffectiveJava（18）接口优先于抽象类

    ***接口和抽象类同样可以用来定义多个实现的类型,然而,接口通常是最佳途径.*** 这条规则有个例外 – 当演变的容易性比灵活性和功能性更为重要的时候,应该用抽象来定义类型 ,但前提是必须理解并且可以 ...

  3. React Native 爬坑之路

    1.react 基础 (创建组件及在浏览器上渲染组件) <!DOCTYPE html> <html lang="en"> <head> < ...

  4. js 获取浏览器显示内容的宽度和高度

      js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...

  5. HttpClient简介

    栏目:Web开发 作者:admin 日期:2015-05-02 评论:0 点击: 204 次   虽然在JDK的java net包中已经提供了访问 HTTP 协议的基本功能,但是对于大部分应用程序来说 ...

  6. 基于React的PC网站前端架构分析

    代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解 ...

  7. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  8. win7不休眠方式设置

    方式1:命令行下以管理员方式执行:powercfg -h off 方式2:右键个性化-->屏幕保护程序-->更改电源设置--->更改计算机睡眠时间--->是计算机进入睡眠状态选 ...

  9. 基于bootstrsp的jquery富文本编辑器的手冊说明

    重点:当在页面插入文本编辑器后.无法用js/jq的方式去将某些值写入到文本编辑器.如:$("textarea").val("111");$("text ...

  10. APP开发关于缓存

    1 http://www.cnblogs.com/qianxudetianxia/archive/2012/02/20/2112128.html 1.1 http://blog.csdn.net/ln ...