css自定义字体(图标)-有些图标不要在P图了

原创 2015年07月09日 13:58:09

Font Awesome 官网:http://fortawesome.github.io/Font-Awesome/

优点:

1.方便,想用一些小图标时,再也不需要去找图片了

2.量多,有超过500多种图标可供选择

3.自定义,图标的颜色可自定义(设置color即可),图标大小可以设置,可设置阴影,还可以加animation动画

4.只要你能想得到的都可以试试

如何使用:

1.首先需要的将字体文件与css文件放到相应的文件里

2.然后在想用使用图标的地方加上样式名(一般用a)

3.如下代码

案例链接:http://pan.baidu.com/s/1gdm1Tbt

<!DOCTYPE HTML">
<html>
 <head>
  <title> New Document </title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  <style type="text/css">
	*{
		margin:0px;
		padding:0px;
	}
	a{
		text-decoration:none;
		display:block;
	}
	#box{
		margin:20px auto;
		width:800px;
		position:relative;
	}
  </style>
 </head>

 <body>
	<a href="#" class="fa fa-2x fa-heart" style="color:red;">红色-心</a>
	<a href="#" class="fa fa-2x fa-fighter-jet" style="color:green;">绿色-战斗机</a>
	<a href="#" class="fa fa-2x fa-train" style="color:blue;">蓝色-火车</a>
 </body>
</html>
效果如下:



下面是所有图标的展示,使用时加上图标后面的样式名称即可:

生成方法参考链接:http://pan.baidu.com/s/1dDsBBO1


CSS3利用@font-face使用自定义字符和图标

前言今天在看wordpress主题的时候,看到一个`class`名为`fa fa-weibo` 当时想知道这是什么用法,然后就找了一下style.css 文件,看看具体的CSS内容,然后发现这是一个很...

纯CSS3实现支持自定义设定的图标

网上有各种用CSS3画图标,画漫画的代码,实在是有点吊!如果能为自己的网站也绘制一套CSS3图标,那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同,但是大势所趋,写写更健康。 ...

CSS3中用自定义字体实现小图标icon

最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的...

css 使用@font-face 嵌入自定义字体或字体图标方法笔记

通常css使用font-family指定客户端显示字体的样式,本笔记目的在于解决客户端未安装指定字体,导致无法完成设计效果要求。与此同时现在大部分图标使用字体格式,因为它有矢量,体积小等等优点讲解如何...

自定义字体——自带常见图标,以后就省的切图了

简介:让你可以即时定制的可伸缩矢量图标;    公有302种图标任你选择;    图标的风格,如:大小、颜色、阴影可以通过css样式修改;     支持ie6、7; 图例:...

自定义字体图标文件

  • 2016年08月30日 09:35
  • 113KB
  • 下载

网页使用Font Awesome图标字体时,css定义 content 属性

网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示: .icon:before {     content: '\f005';     font-...
  • zsg88
  • zsg88
  • 2017年03月21日 22:54
  • 4586

ionic2中使用自定义字体图标

使用自定义字体图标的开始是一样的都是在字体图标库生成需要用到的字体图标。步骤如下: 以上我选择过前两个都可以实现(Unicode/Font class都可以) 接下来的两种引用方式:不管是哪种引用方...

WPF自定义控件与样式(1) - 图标字体

一、图标字体        阿里巴巴开源字体网址:http://www.iconfont.cn/       使用方法:        1、新浪微博账号登录        2、点击图标 -> "添加入...

sencha touch 2.3 自定义图标字体

程序使用sencha cmd创建,sdk版本是2.3.1。创建自定义图标字体。 1.确保能执行compass compile --trace,即需要安装ruby,sass,compass等,安装过程这...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css自定义字体(图标)-有些图标不要在P图了
举报原因:
原因补充:

(最多只允许输入30个字)