关于字体图标
来源:互联网 发布:明解c语言 中级篇 编辑:程序博客网 时间:2024/06/06 16:16
给body一个字体样式:
(1)
body { font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;}
(2)引入字体图标:
在html中查看元素的字体库,在css中打开,并且复制样式
@font-face { font-family: 'itcast'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff'); }
(3)
字体图标格式解析:
eot : embedded-opentypesvg : svgttf : truetypewoff : woff
(4)写一个通配选择器 把所有的字体图标样式加载进去
[class^=”icon-“],就是所有的以icon开头的被选中
[class*=” icon-“],注意上面选择器中间的空格 表示在后面的名字叫icon
[class^="icon-"],[class*=" icon-"] { /*注意上面选择器中间的空格*/ /*我们使用的名为itcast的字体就是上面的@font-face的方式声明的*/ font-family: itcast; font-style: normal;//把斜体改成正常}
(5)
若想让元素垂直显示,可以给该父级元素设置 高度和行高 相等想让元素水平居中使用bootstrop中给定的 text-center即可
(6)
因为有hover效果 所以最好用一个a标签包裹起来
比如:因为hover之后要有一个图片显示出来,故img标签要放到a里面
<div class="col-md-2 text-center"> <a class="mobile-link" href="#"> <i class="icon-mobile"></i> <span>手机微金所</span> <!-- 这里使用的是bootstrap中的字体图标 --> <i class="glyphicon glyphicon-chevron-down"></i> <img src="..." alt=""> </a></div>
阅读全文
0 0
- 关于FA字体图标
- 关于字体图标
- 关于字体图标
- 关于bootstrap的字体图标问题
- 关于火狐浏览器读不出icon字体图标
- 字体图标
- 字体图标
- 字体图标
- 字体图标
- 图标字体
- 字体图标
- 字体图标
- 字体图标
- 字体图标
- Bootstrap学习笔记—关于Glyphicons 字体图标
- 关于bootstrap中的Glyphicons 字体图标的知识点
- 字体图标以及字体图标的制作
- 【转】字体图标
- ASCII排序
- 第一行代码 U1-U2
- Cocos2DX UIListView 大量加载优化方案
- Java IO 装饰者模式
- ubuntu16.04下pycharm配置
- 关于字体图标
- 《托尔斯泰的烦恼》纪录片笔记
- USAGE: facerec_demo.py </path/to/images> [</path/to/store/images/at>] 问题解决
- 反射-通过反射获取无参构造方法并使用
- Joseph
- linux系统备份(转)
- AndroidStudio1.4创建项目中build.gradle(Project:Test...)配置
- SIGCHLD--子进程的异步等待
- 深入理解Eureka之源码解析