.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. 总结day5 ---- ,字典的学习,增删改查,以及字典的嵌套, 赋值运算

    内容大纲: 一:字典的定义 二:字典的增加 >1:按照key增加,  无则增加,有则覆盖 >2:setdefault()  ,无则增加,有则不变 三:字典的删除 >1:pop()  ...

  2. 架构师养成记--17.disrunptor 多生产者多消费者

    入口: import java.nio.ByteBuffer; import java.util.UUID; import java.util.concurrent.CountDownLatch; i ...

  3. CSS01--概述与选择器

    CSS:Cascading Style Sheets,层叠样式表.我们之前已经说过,HTML解决的是网页内容(结构)的问题,而CSS立足于网页的表现方面的问题,则样式定义如何显示HTML标签,js负责 ...

  4. 腾讯云服务器安装宝塔面板快速配置LNMP/LAMP网站系统

    我们在选择购买腾讯云服务器之后,有部分用户肯定是用来建站用途的.毕竟云服务器的性能和功能比虚拟主机优秀很多.腾讯云服务器拥有香港.北京.广州.上海.美国等多个机房,可以安装Linux和Windows系 ...

  5. mariadb配置主从同步遇到的问题

    一:ERROR: No query specified 解决方案: \G后面不能再加分号;,因为\G在功能上等同于;,如果加了分号,那么就是;;(2个分号),SQL语法错误 二:主从同步不成功 Sla ...

  6. Hibernate 连接数据库,数据库返回数据超过限制报错

    1.packet for query is too large 1024 >. you can change this value on the server mysql max_allowed ...

  7. BiliBili, ACFun… And More!【递归算法】

    题源:http://acm.uestc.edu.cn/#/problem/show/3 题解: 题意:播放一段视频文件,有播放速度和缓冲速度两种,因为作者的癖好,播放前要缓冲几秒钟(这段时间不计算在总 ...

  8. 【性能压测】:MQ队列异步处理机制导致的系统无法接受请求的问题

    一,最近压测系统交易峰值时,因该支交易采用MQ异步队列处理机制:该增加积分的交易,前段服务器优先返回给客户增加积分成功的结果,后端的MQ队列服务器再慢慢处理该请求: 二,压测过程中出现的问题现象:前几 ...

  9. Linux常用快捷键、文件管理和查询

    有话要说 为什么要用Linux?要用Linux的原因太多,想说说不完啊.如果你说用Linux只是为了装逼,那证明你真的还很菜.不排除有装逼了因素,那也只占非常少的比例,可以忽略不计.我们反问一下,为什 ...

  10. 第十篇--------javascript函数-参数

    javascript函数的参数:形参,实参 //function 参数 //形参列表 function test(a,b,c,d){ //alert(test.length); //形参个数,4个 / ...