html中特殊字体图标,Awesome图标和css特殊字体的使用方法_html/css_WEB-ITnose
作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了
昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome 下载后这些文件,
现在的版本是4.2,Font Awesome从4.1.0版本开始不再支持IE7, 但更早的版本仍然支持,如果需要考虑IE7有下面解决方法
一,首先将css文件下的文件复制到我们项目css文件夹中,在中引入奥森图标的css样式 这个毋庸置疑,至于引入压缩版还是不压缩版 看心情
我这里下的有个ie7的压缩版,有些地方下的没有这个文件,这个是考虑到还在坚持使用ie7的古董们而出现的,直接引入即可
同样也可以用CDN引入,官网有介绍。
二,使用图标这个不需要太多介绍,对应着奥森图标网站寻找class,如 前面的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样式中引入四种字体
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
注:特殊字体使用需要使用 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变成了 美妙吧。。
其他特殊字体的引入也是如此,先@font-face引入字体 data-icon定义字体 定义data-icon样式 使用字体 欧卡。。。
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
html中特殊字体图标,Awesome图标和css特殊字体的使用方法_html/css_WEB-ITnose相关推荐
- css 引用嵌入字体不起用_使用CSS嵌入字体
css 引用嵌入字体不起用 Fonts can also be embedded into web pages: that is, the end-user sees the page text in ...
- 奥森图标和CSS特殊字体使用方法
作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome 下载后这些文件,现在的版本是4.2,Font Awesom ...
- php中字体样式的设置,CSS里字体样式怎么设置
在网页中我们常常对网页中文字设置字体,用font-family这个属性就可以对字体样式进行设置了.那么我们今天就来教大家从html的字体到css字体的设置方法. 原始的html字体设置 Html的文字 ...
- css的中文名称是,CSS 中文字体的英文名称
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...
- 零基础CSS入门教程(8)——CSS设置字体
本章目录 1.任务目标 2.css设置字体 3.代码演示 4.小结 1.任务目标 我们前几个小结学习了,css的选择器,和及基本的改变字体颜色.我们这一小结学习一下设置字体的一些功能 2.css设置字 ...
- 01_MUI之Boilerplate中:HTML5示例,动态组件,自定义字体示例,自定义字体示例,图标字体示例
1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...
- web页面设计中使用阿里字体(包含图标)
由于浏览器的兼容问题,很多文本样式在不同浏览器中可能显示不出期待的效果:阿里字体解决了绝大部分浏览器的兼容问题,在各大浏览器都兼容 一.登录阿里字体官网 iconfont-阿里巴巴矢量图标库 在搜索栏 ...
- html5 svg 信箱图标,在网页中使用内联SVG图标和字体图标的比较
如果你要在你的网站中创建一个图标系统,你可以有不少的选择.如果你希望使用图片来制作图标,可以使用CSS sprites(CSS雪碧)技术.如果你希望使用矢量图来作为图标(这是时下非常流行的做法),你可 ...
- 将阿里巴巴Iconfont字体图标 引入到HTML(CSS)文件中
一.打开iconfont阿里巴巴矢量图标库官方网站.找到喜欢的图标添加入库,同时建立项目,将你所选择的图标放到项目里. 二.复制 "//at..."那一串地址,将其写入在你想引用某 ...
最新文章
- 使用angular5+ionic3+sqlite创建离线app应用
- 4dda在linux中的意思,Evvail | MaxQuant-蛋白质组DDA数据分析金标准 | Omics - Hunter
- python长整型字节数_Python将整数转换为16字节字节
- 简单实现UITableView索引功能(中英文首字母索引)(一) ByH罗
- nodejs操作sqlserver数据_nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例...
- 2016/9/23总结电脑内容
- Oracle修改表空间为自动扩展
- 图模型在信息流推荐系统中的原理和实践
- swf缓存文件在哪里_移动web缓存介绍
- while循环--登录
- 有关cdsn论坛被封后如何解封
- 文员常用的8个excel函数
- 遗传算法bp神经网络原理,bp神经网络和遗传算法
- 计算机论文参考文献范文,计算机文类论文参考文献 计算机文参考文献有哪些...
- 个人java学习路线-Spring
- 新版本读取老版本文件崩溃BUG
- 思维导图 · B端业务的难点
- 凸优化理论(一)深入理解仿射集,凸集,锥等定义及相关证明
- 【Spark】spark对mysql的操作
- 二进制、八进制、十进制、十六进制之间的互相转化
热门文章
- SAP MIGO货物移动的错误消息未能正确显示到相应行项目
- php将证书保存位pem格式,openssl-如何以.pem格式保存证书中的公钥
- Guitar Pro删除的一个完整小节的操作步骤解析
- Android 超高仿微信图片选择器 图片该这么载入
- c语言解析toml文件,使用cpptoml 读取 TOML 格式配置文件
- mysql事务特性及四种隔离级别
- PHP josn和数组互相转换 josn转数组 数组转为josn
- 连接我的计算机 教案,六年级上册信息技术教案11连接我的计算机重庆大学版
- springboot集成swagger2页面出现swagger-resources404
- ERR_INCOMPLETE_CHUNKED_ENCODING 200