博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
奥森图标和CSS特殊字体使用方法
阅读量:4618 次
发布时间:2019-06-09

本文共 1405 字,大约阅读时间需要 4 分钟。

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

昨天在项目中发现有很多这些Awesome图标 也在网上找了下下载后这些文件,现在的版本是4.2,Font Awesome从4.1.0版本开始不再支持IE7, 但更早的版本仍然支持

官网和各种帖子也写了些使用方法,就是没有太清楚 不然我也不会被搞得凌乱掉,

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

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

同样 网上有说可以引入CDN 只是我没有测试成功

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

二,使用图标 对应着寻找class

使用方法如<i class="fa fa-wifi"></i> 前面的fa是必须的 后面的class是对应图标的class

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

一堆报错,显示没有找到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文件夹

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

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

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

很关键的一部在样式中使用字体 font-family:"Raphaelicons"; 如果将引入的字体使用 那图标的样式就是不出现,好看的图标出现了 定义的H变成了 如下

美妙吧。。

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

 

转载于:https://www.cnblogs.com/yangjie-space/p/4800650.html

你可能感兴趣的文章
unity3d 加密资源并缓存加载
查看>>
小郁闷
查看>>
设计表时给哪些字段加索引,索引的用处,以及能不能给所有字段加索引
查看>>
《走着走着就到了西藏》-读后感
查看>>
hdu2046
查看>>
2017.9.30 Java中引用类型变量的创建及使用&循环的高级
查看>>
JAVA图形界面编程
查看>>
单点登录-客户端配置
查看>>
Java基本组件之context-param、listener、 filter、servlet
查看>>
打印环境变量
查看>>
SQL之透视、逆透视及分组集
查看>>
网站并发数的理解
查看>>
机器学习 - 特征筛选与降维
查看>>
黑马乐优商城
查看>>
synchronized用法
查看>>
Web前端开发规范
查看>>
Android Volley入门到精通:初识Volley的基本用法
查看>>
python中字符串拆分与合并——split()、join()、strip()和replace()
查看>>
14.Longest Common Prefix
查看>>
变量定义了 但是没有赋值的情况下 也会是undifine var n; alert(typeof(n))
查看>>