9159金沙游艺场-奥门金沙游艺场-[欢迎您]

9159金沙游艺场为您呈现最新的面貌!,目前注册送体验金,欢迎您将成为影视娱乐行业新的风向标,是亚洲的优质娱乐先锋。

Awesome图标和css特殊字体的使用方法

日期:2020-01-04编辑作者:服务器

Awesome图标和css特殊字体的使用方法,awesomecss

 

作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了

昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome 下载后这些文件,

 

图片 1

 现在的版本是4.2,Font Awesome从4.1.0版本开始不再支持IE7, 但更早的版本仍然支持,如果需要考虑IE7有下面解决方法

一,首先将css文件下的文件复制到我们项目css文件夹中,在<head>中引入奥森图标的css样式 这个毋庸置疑,至于引入压缩版还是不压缩版 看心情

 

图片 2

 

我这里下的有个ie7的压缩版,有些地方下的没有这个文件,这个是考虑到还在坚持使用ie7的古董们而出现的,直接引入即可

同样也可以用CDN引入,官网有介绍。

 

二,使用图标这个不需要太多介绍,对应着奥森图标网站寻找class,如<i class="fa fa-wifi"></i> 前面的fa是必须的 后面的class是对应图标的class

三,查看下项目 蛋疼的是图标呢, 哪去了。。。。查看下控制台

 

图片 3

 

一堆报错,显示没有找到fonts这个文件夹下的字体, 我会说 我没有引入fonts里面的东西啊 为什么会出现这个报错,其实我也不知道

应该是引入Awesome的css文件项目会自动寻找fonts这个文件夹,现在把fonts文件夹引入到项目(直接把文件夹复制到项目 别改了文件夹名字 昨天就是fonts改成font 我擦 搞得气死了 这么easy的事情竟然找了许久)

OK。。图标成功出现了,蛋疼的问题就是 一定要把对应字体的文件夹引入好

 

CSS特殊字体使用方法

好的 上面这个图标问题解决了,再来看下网页中引入特殊字体时使用方法吧,

特殊字体的引入靠@font-face语句实现 这些字体浏览器的支持还是良好的,低至IE6/IE4都支持,很不错,兼容问题就不要考虑了

主要格式四种(.eot、.woff、.svg、.ttf),为什么会有四个 是针对不同浏览器各自为政出现的,不说太详细 都引入就对了,引入各式

1,YourWebFontName:下载的字体名称;

2,source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

3,format:此值指的是你自定义的字体的格式,也就是上面说的四种格式 帮助各种浏览器识别

4,weight和style:即字体的粗细和样式。

 

OK。。。 举个例子,下载个raphaelicons字体,下载后一个fonts文件夹

图片 4

两个txt文本不考虑,有四个字体,现在在css样式中引入四种字体

1 @font-face{
2     font-family: 'Raphaelicons';
3     src:url('fonts/raphaelicons-webfont.eot')format('eot');
4     src:url('fonts/raphaelicons-webfont.svg')format('svg');
5     src:url('fonts/raphaelicons-webfont.woff')format('woff');
6     src:url('fonts/raphaelicons-webfont.ttf')format('truetype');
7     font-weight: normal;
8     font-style: normal;
9 }

 

 该庆祝下。。 已经把字体成功引入样式,看下结构

1 <div class="st-desc" data-icon="H"></div>

 

注:特殊字体使用需要使用 data-icon="" 来定义图标,相对应的H就会变成所下字体的图标,定义css样式

1 [data-icon]:after{
2     content: attr(data-icon);
3     width: 200px;
4     height: 200px;
5     color: #fff;
6     font-size: 90px;
7     font-family: 'Raphaelicons';
8     text-shadow:1px 1px 1px rgba(151,24,64,0.2);
9 }

 

很关键的一步在样式中使用字体 font-family:"Raphaelicons"; 如果没有将引入的字体使用 那图标的样式是不会出现

好看的图标出现了 定义的H变成了 美妙吧。。

图片 5

其他特殊字体的引入也是如此,先@font-face引入字体  data-icon定义字体  定义data-icon样式  使用字体 欧卡。。。

作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些A...

本文由9159金沙游艺场-奥门金沙游艺场-[欢迎您]发布于服务器,转载请注明出处:Awesome图标和css特殊字体的使用方法

关键词:

后端开发的角度

Python 异步 IO 的未来(从 Web 后端开发的角度)(1) 免责声明:我是一个工程师,拥有10年以上的 WEB后端开发经验,大部...

详细>>

jQuery完结机关心换播放的经文滑动门效果9159金沙

jQuery实现自动切换播放的经典滑动门效果,jquery滑动门 本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分...

详细>>

iostat命令详解

iostat命令详解 iostat用于输出CPU和磁盘输入输出、分区、网络文件系统NFS相关的统计信息。iostat命令用于监控系统设备...

详细>>

文本框与按键的最简组合【9159金沙游艺场】

面试必备:文本框与按键的最简组合,文本框最简 在家修养了大三个月,终于要起来找专门的学问了!因为身体的缘...

详细>>