.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. 部署WSUS服务(一)

    引言:随着网络的发展,我们的生活也越来越离不开网络,但面临的安全威胁也越来越多.像去年爆发的针对Windows系统的勒索病毒(Wanna Cry)和年初爆发的Intel芯片漏洞告诉我们网络威胁时时刻刻 ...

  2. Vue 父子组件传递方式

    问题: parent.vue <template> <div> 父组件 <child :childObject="asyncObject">&l ...

  3. VS2015编译器按F6不能够重新生成

    工具-->选项-->环境-->键盘-->应用以下其他键盘映射方案,下拉选择 Visual C# 2005

  4. Mysql update from

    UPDATE tab1   a INNER JOIN tab_game_version as b ON a.id=b.id SET a.advert_data=0 where a.advert_dat ...

  5. Q72 编辑距离

    给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字符 示例 1: 输 ...

  6. Mac下配置Java Web开发环境(Mac 10.12)

    1.JDK http://www.cnblogs.com/EasonJim/p/6277541.html 2.MySQL http://www.cnblogs.com/EasonJim/p/62758 ...

  7. 对Tensorflow中tensor的理解

    Tensor即张量,在tensorflow中所有的数据都通过张量流来传输,在看代码的时候,对张量的概念很不解,很容易和矩阵弄混,今天晚上查了点资料,并深入了解了一下,简单总结一下什么是张量的阶,以及张 ...

  8. 剑指offer(11-20)编程题

    二进制中1的个数 数值的整数次方 调整数组顺序使奇数位于偶数前面 链表中倒数第k个结点 反转链表 合并两个排序的链表 树的子结构 二叉树的镜像 顺时针打印矩阵 包含min函数的栈 11.输入一个整数, ...

  9. @Scheduled执行定时任务与cron表达式

    1 配置文件形式执行定时任务 1 1.X 版本与spring结合使用实例 1.1 常用maven管理 pom.xml文件 <project xmlns="http://maven.ap ...

  10. rails 中 create, new, build, save 的用法以及误区汇总 (转)

    自己很初级,初级的不能再初级,所以初次接触rails的时候,对于里面的create,new,build等方法不是很了解,用的很混乱,导致经常出现不必要的bug,很苦恼,决定,总结一下,结合网上已有资源 ...