font字体图标
来源:互联网 发布:华能和国电投合并知乎 编辑:程序博客网 时间:2024/05/21 19:31
font
字体图标能够网页添加别致的字体风格样式,而且也能够起到在不同浏览器中统一字体风格的作用。
它的扁平化设计,将网页从冗余、厚重和繁杂的装饰效果中解脱出来;它的兼容性好,从ie4就开始支持,几乎所有的浏览器都支持
那接下来小编给大家介绍字体图标的使用方式。
使用步骤
1、先去网上下载我们需要的字体图标。(以阿里巴巴字体库为例)
国外:
https://icomoon.io/
http://www.bootcss.com/p/font-awesome/国内: iconfont.cn 阿里巴巴字体库
下载后一般是一个 iconfont.zip 文件夹- 2、放入到网站的站点内, font/
- 3、在使用字体图标的html页面的css文件中作如下声明
···css
@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } /* url()中是 css文件相对于 font文件夹的路径 */
···
- 4、在html页面中使用字体图标
···html example
<i> ŗG; </i> <!-- ŗG;为字体图标 -->
···
0 0
- 字体图标html+font
- 字体图标 icon font
- font字体图标
- 字体图标--Font Awesome
- Font Awesome图标字体使用
- 使用图标字体Font Awesome
- 生成自定义图标字体工具 - Font Custom
- Font Awesome:图标字体,完全CSS控制
- android使用Font Awesome字体图标
- Font Awesome:图标字体,完全CSS控制
- Android调用font-awesome字体图标
- font awesome 字体冲突 图标无法显示
- 利用CSS3 @font-face使用图标字体
- android 使用字体图标(Icon Font)
- html添加字体图标font icon
- icon-font 图标字体的使用
- font-face字体图标制作和使用
- axure_a2_安装Font Awesome字体图标
- linux配置网络
- OIBH杯第三次模拟赛(普及组)Problem 3 : maxsum 最大约数和
- ubuntu16.04引导加密
- 斯坦福机器学习——异常检测
- 绘图组件总结
- font字体图标
- 2017.1.13——寒假集训第二天
- 【JAVA秒会技术之软件应用】Chrome超强测试软件Advanced-REST-client免越狱安装
- mysql配置文件设置注意点
- Asp.Net 请求处理机制
- 最小二乘法的一般形式和矩阵形式原理推导和代码实现
- C++ 语法实验室之 inline 关键字
- c++/java中类和对象的区别
- win7下安装TensorFlow