关于字体图标

来源:互联网 发布:明解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>
原创粉丝点击