在 :after/ :before 使用 font awesome web Icon
.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的更多相关文章
- @font-face制作Web Icon
@font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...
- Web 设计新趋势: 使用 SVG 代替 Web Icon Font
如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...
- WEB ICON 的探讨
一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢 在线教程:用字体在网页中画ICON图标 http://www.imooc.com ...
- 为网站文字前面添加图标 在线调用 Font Awesome 字体icon小图标 美化网站
一.如何开始 1.将下面的代码复制粘贴到HTML页面面的 <head> 下面 <link rel="stylesheet" href="https:// ...
- [记录] web icon 字体
weloveiconfonts 在http://codepen.io/cguillou/pen/jmkfK 中看css发现既然有这样的,yes!
- 如何在移动端app中应用字体图标icon fonts (转)
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- 如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
- Font Awesome使用方法
Font Awesome(中文站点)是一套为Bootstrap而创造的图标字体库及CSS框架,在业界享有盛誉. FA包含了常规web开发所需要用到的几乎所有图标,并且免费授权使用,只需要下载即可.所有 ...
- 从web现状谈及前端性能优化
从web现状谈及性能优化 原文出处:<Karolina Szczur: The State of the Web> 性能优化指南The Internet is growing expone ...
随机推荐
- win7 下如何安装 Microsoft Web Application Stress Tool
Microsoft Web Application Stress Tool是一个简单易用的性能压力测试工具,但因为其诞生的年代较早,在目前的win7系统下运行,会存在一些兼容性的问题,以下是我在实际使 ...
- Linux之Ubuntu系统安装搜狗输入法
如何在Ubuntu系统中安装搜狗输入法? 1.第一步 下载搜狗输入法文件for Linux 2.检查更新 update 如果没有更新的话,需要做这一步 3.语言支持 选择fcitx,然后关闭界面 4 ...
- webpack+vue中安装使用vue-layer弹窗插件
1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...
- tomcat运行springboot项目war包
以最简单的spring boot demo项目来演示如何发布项目war包到tomcat,并成功运行(有很多小伙伴会出现404错误) 一.准备一个最简单的demo项目 在IDEA中新建一个项目,一直ne ...
- python全栈开发学习_内容目录及链接
python全栈开发学习_day1_计算机五大组成部分及操作系统 python全栈开发学习_day2_语言种类及变量 python全栈开发_day3_数据类型,输入输出及运算符 python全栈开发_ ...
- Wi-Fi科普讲稿
Wi-Fi 从入门到?? 组员:deleted 什么是Wi-Fi Wi-Fi 在中文里又称作"无线热点",是Wi-Fi联盟制造商的商标做为产品的品牌认证,是一个创建于IEEE 80 ...
- 一些很好用但不常用的css属性总结 (持续中......)
在各种框架横行的9012,感觉我们学前端的都变得浮躁了很多,放一张最近流行的神图: 唉,扯远了, 还是整理我的东西吧,路漫漫其修远兮,吾将上下而求索! 1, position:sticky; 粘性定位 ...
- dubbo集群容错之LoadBalance
原文地址:Dubbo 源码分析 - 集群容错之 LoadBalance dubbo 提供了4种负载均衡实现,分别是基于权重随机算法的 RandomLoadBalance.基于最少活跃调用数算法的 Le ...
- JavaScript设计模式-3.原型模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C 标准库 - string.h之memcpy使用
memcpy Copy block of memory Copies the values of num bytes from the location pointed to by source di ...