.element {
position: relative;
} /*replace the content value with the
corresponding value from the list below*/ .element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left:;
}

来源: http://astronautweb.co/snippet/font-awesome/

在 :after/ :before 使用 font awesome web Icon的更多相关文章

  1. @font-face制作Web Icon

    @font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...

  2. Web 设计新趋势: 使用 SVG 代替 Web Icon Font

    如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...

  3. WEB ICON 的探讨

    一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢 在线教程:用字体在网页中画ICON图标 http://www.imooc.com ...

  4. 为网站文字前面添加图标 在线调用 Font Awesome 字体icon小图标 美化网站

    一.如何开始 1.将下面的代码复制粘贴到HTML页面面的 <head> 下面 <link rel="stylesheet" href="https:// ...

  5. [记录] web icon 字体

    weloveiconfonts  在http://codepen.io/cguillou/pen/jmkfK 中看css发现既然有这样的,yes!

  6. 如何在移动端app中应用字体图标icon fonts (转)

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  7. 如何在移动端app中应用字体图标icon fonts

    How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...

  8. Font Awesome使用方法

    Font Awesome(中文站点)是一套为Bootstrap而创造的图标字体库及CSS框架,在业界享有盛誉. FA包含了常规web开发所需要用到的几乎所有图标,并且免费授权使用,只需要下载即可.所有 ...

  9. 从web现状谈及前端性能优化

    从web现状谈及性能优化 原文出处:<Karolina Szczur: The State of the Web> 性能优化指南The Internet is growing expone ...

随机推荐

  1. numpy 常用方法2

    Python之Numpy基础   一个栗子 >>> import numpy as np >>> a = np.arange(15).reshape(3, 5) & ...

  2. mysql5.7.20多实例编译安装

    好记性不如烂笔头! MySQL多实例 实际上就是在同一台服务器上运行多个mysql服务进程. 相同点:公用同一套MySQL安装程序. 不同点:使用不同的配置文件(也可以相同).启动程序(也可以相同). ...

  3. leetcode-49-字母异位词分组(神奇的哈希)

    题目描述: 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "t ...

  4. leetcode-840-Magic Squares In Grid

    题目描述: A 3 x 3 magic square is a 3 x 3 grid filled with distinct numbers from 1 to 9 such that each r ...

  5. 2016级算法期末模拟练习赛-C.AlvinZH的青春记忆II

    1084 AlvinZH的青春记忆II 思路 中等题,二分. 简化题意,一列数字,每秒会自动-1,特殊操作可以使一个数在1s内-k,问这些数都减至0需要多久. 答案肯定在[1,xMax]之间,采用二分 ...

  6. Java多线程——volatile关键字、发布和逸出

    1.volatile关键字 Java语言提供了一种稍弱的同步机制,即volatile变量.被volatile关键字修饰的变量不会被缓存在寄存器或者对其他处理器不可见的地方,因此在每次读取volatit ...

  7. 3.1)DFM-塑胶件设计总章

    本章目的:各种塑胶工艺了解,DFM-塑胶件的设计准则是依据哪种工艺. 1.塑胶概念 塑胶的定义(美国塑料工业协会): 塑胶主要由碳.氧.氢和氮及其他有机或无机元素所构成,成品为固体,在制造过程中是熔融 ...

  8. ubuntu设置root权限默认密码

    1.默认root密码是随机的,即每次开机都有一个新的root密码.我们可以在终端输入命令 sudo passwd,然后输入当前用户的密码2.终端会提示我们输入新的密码并确认,此时的密码就是root新密 ...

  9. JAVA list对象排序加去重问题

    对象类实现继承Comparable接口重写compareTo方法实现排序功能,重写equals方法实现去重功能(根据ID去重)public class TestAbilityAnalyze imple ...

  10. 21.Decorator修饰器

    1.类的修饰 2.方法的修饰 3.为什么修饰器不能用于函数? 4.core-decorators.js 5.使用修饰器实现自动发布事件 6.Mixin 7.Trait 8.Babel转码器的支持