首页 > 代码库 > css字体图标的使用方法

css字体图标的使用方法

技术分享
提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~
css sprite用背景图片定位,兼容性好,图标颜色丰富,但是对于网站缩放来讲,会使图片失真,也不容易维护;而当我们运用字体图标来做这个事的时候,好处就多多了(但是字体图标就是颜色单一,一般可忽略)
1.首先从https://icomoon.io/ 国外的字体图标库 非常好 下载免费的图标库(也可以自己添加要求添加SVG格式的图标 ),但是如何把图标便成为web字体呢,请看下面的链接
http://www.flowerboys.cn/font/tutorial.html 将图标变为字体
2.从https://icomoon.io/app/#/select免费的字体图标库中,选择所需要的字体图标库,然后下载下来 将font引入到自己的css目录中
font+html :
html:
<ul class="layout">
<li><a href=""><i style="color: #efe0ce;" class="imooc-icon">?</i></a></li>
<li><a href=""><i style="color: #ef7073;" class="imooc-icon">?</i></a></li>
<li><a href=""><i style="color: #78ade3;" class="imooc-icon"></i></a></li>
<li><a href=""><i style="color: #eae77f;" class="imooc-icon"></i></a></li>
<li><a href=""><i style="color: #3c3c3c;" class="imooc-icon"></i></a></li>
<li><a href=""><i style="font-size:30px;" class="imooc-icon"></i></a></li>
<li><a href=""><i style="font-size:60px;" class="imooc-icon"></i></a></li>
<li><a href=""><i style="font-size:90px;" class="imooc-icon"></i></a></li>
<li><a href=""><i style="font-size:120px;" class="imooc-icon"></i></a></li>
<li><a href=""><i style="font-size:148px;" class="imooc-icon"></i></a></li>
</ul>
打开已经下载font字体图标demo.html 里边有相关的图标代码f048 ,但是浏览器需要添加&#x才可以识别

  

css:(只粘贴使用的css代码)
 
@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")/* IE6-IE8 */
,url("../fonts/icomoon.woff") format("woff")/* chrome, firefox */
,url("../fonts/icomoon.ttf") format("truetype")/* chrome, firefox, opera, Safari,Android, iOS 4.2+*/
,url("../fonts/icomoon.svg") format("svg");/* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
.imooc-icon{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size: 64px;
-webkit-font-smoothing: antialiased;/* 防webkit内核浏览器锯齿*/
-moz-osx-font-smoothing: grayscale;/*防mac浏览器锯齿*/
}
其中 #iefix 解决ie6中无法显示的问题

 

font+css:
html:
<ul class="layout">
    <li><i class="icon icon-heart"></i></li>
  <li><i class="icon icon-heart"></i></li>
  <li><i class="icon icon-heart"></i></li>
  <li><i class="icon icon-heart"></i></li>
</ul>
技术分享
css:
@font-face{
    font-family: "imooc";
    src: url("../fonts/imooc.eot");/* IE9兼容 */
    src: url("../fonts/imooc.eot?#iefix") format("embedded-opentype"),
    url("../fonts/imooc.woff") format("woff"),
    url("../fonts/imooc.ttf") format("truetype"),
    url("../fonts/imooc.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
.icon{
    font-family: "imooc";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-heart:before { /*对于before 伪元素 请自行百度*/
    content: "\e600";
}

  

其次,css sprite : 按照所需要的盒子width height 用ps 均匀切割 图片 以图片为背景 制作icon小图标
 
html代码:
<ul class="sprite">
  <li>
    <s style="background-position: 0 0;" class="s-icon"></s>
    <a href="">adsf</a>
  </li>
  <li>
    <s style="background-position: 0 -40px;" class="s-icon"></s>
    <a href="">adsfwfewe</a>
  </li>
  <li>
    <s style="background-position: 0 -80px;" class="s-icon"></s>
    <a href="">123123213213/a>
  </li>
</ul> 
对应css:
 
.sprite{
  margin: 10px auto;
  width: 206px;
  border: 1px solid #b51600;
}
.sprite li{
  cursor: pointer;
  height: 42px;
  width: 206px; 
  border-bottom: 1px solid #911001;
  border-top: 1px solid #c11e08;
}
.sprite li a {
  color: #fff;
  line-height: 42px;
  font-size: 14px;
}
.sprite li s{
  height: 40px;
  width: 24px;
  display: block;
  margin-left: 10px;
  margin-right: 8px;
  float: left;
  background-image: url("../images/s-icon.png");
}

  

 

css字体图标的使用方法