.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. solr安装教程

    Solr Solr is the popular, blazing-fast, open source enterprise search platform built on Apache Lucen ...

  2. POJ3460 Booksort(IDA*)

    POJ3460 Booksort 题意:给定一个长度为n的序列,每次可以取出其中的一段数,插入任意一个位置,问最少需要几次操作才能使整个序列变为1~n 思路:IDA*+迭代加深搜索 小技巧:将一段数插 ...

  3. 如何使用Node爬虫利器Puppteer进行自动化测试

    文:华为云DevCloud 乐少 1.背景 1.1 前端自动化测试较少 前端浏览器众多导致页面兼容性问题比较多,另外界面变化比较快,一个月内可能页面改版两三次,这样导致对前端自动化测试较少,大家也不是 ...

  4. 微信小程序富文本编辑,Thinkphp5.1

    内容很简单,代码做了注释可以看一下 主要是把 文本 标题 标题颜色  图片 赋值到数组内, 举例: { pic: "/Share/image/images/bgqq_01.png" ...

  5. python学习,day3:函数式编程,局部变量和全局变量

    # coding=utf-8 # Author: RyAn Bi school = 'THU' #全局变量 def change_name(name): global age #在函数中,用globa ...

  6. c# Equals方法

    很多C#的教材都会强调对象相等的概念.我们都知道,在C#的世界里存在两种等同性.一种是逻辑等同性:如果两个对象在逻辑上代表同样的值,则称他们具有逻辑等同性.另一种是引用等同性:如果两个引用指向同一个对 ...

  7. html-css-js基本理解和简单总结

    目录 一.对于网页的基本理解 1.网页是一种数据展示和信息交互的载体 2.网页组成部分 3.支撑一个网页的技术模块 二.html的理解和技术笔记 1.html理解 2.html技术笔记-html标签 ...

  8. html网页如何传递接收地址参数?

    实现html页面的参数传递 方法一: 下面是javascrīpt的一种实现方法, 这个函数是通过window.location.href中的分割符获得各个参数. 有了这个函数,就可以在页面之间传递参数 ...

  9. 用idea搭建一个简单的SSM的Demo

    1.新建一个maven  web app项目 结构如下 resources的资源文件如下 applicationContext.xml 的配置 <?xml version="1.0&q ...

  10. 【es6】正则扩展