提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~
css sprite用背景图片定位,兼容性好,图标颜色丰富,但是对于网站缩放来讲,会使图片失真,也不容易维护;而当我们运用字体图标来做这个事的时候,好处就多多了(但是字体图标就是颜色单一,一般可忽略)
1.首先从https://icomoon.io/ 国外的字体图标库 非常好 下载免费的图标库(也可以自己添加要求添加SVG格式的图标 ),但是如何把图标便成为web字体呢,请看下面的链接
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字体图标的使用方法的更多相关文章

  1. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  2. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

  3. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  4. css3 - 字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...

  5. css - 字体图标的制作

    很多的时候我们在开发过程中一般都是直接使用图片,尤其在移动页面频繁请求图片对性能不是很好 ,所以图标字体的应用也越来越广泛.一般情况下直接用的是font awesome字体,但是有时候需要制作自己风格 ...

  6. iconfont阿里字体图标的使用方法

    我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...

  7. 007:CSS字体图标

    目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好 ...

  8. CSS字体图标

    一.什么是字体图标: 1. 字体图标可以和图片一样改变透明度,旋转度,等等 2.本质是文字,可以改变大小颜色等等比较适用于移动端 总结;图标字体具有矢量效果,放大缩小不失真,而且可以使用CSS任意更改 ...

  9. iconfont字体图标的使用方法

    转载于https://www.cnblogs.com/hjvsdr/p/6639649.html 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了 ...

随机推荐

  1. 0~5年一个Java程序员的晋升之路

    在程序界流行着一种默认的说法叫“黄金5年”,也就是一个程序员从入职的时候算起,前五年的选择直接影响着整个职业生涯中的职业发展方向和薪资走向,如何走好这5年,彻底从一个刚入行的菜鸟蜕变成可以以不变应万变 ...

  2. .NET Standard 2.0正式发布了

    亦可赛艇 前天(2017年8月14日),.NET Standard 2.0正式版终于发布了,与之相配套的.NET Core 2.0也同时正式发布,真是令人振奋. 详情请看:https://blogs. ...

  3. IIS集中化管理与编程REST API

    目录 一.       简介.... 1 二.       安装.... 1 三.       IIS Administration配置文件.... 2 四.       Web UI管理界面.... ...

  4. 基于Java的HashMap和HashSet实现

    一.Map接口类: import java.util.Iterator; public interface IMap<K, V> { /* 清除所有键值对 */ void clear(); ...

  5. CS231n 第一次作业KNN中本地CIFAR10数据集的载入

    一.问题描述 网上绝大多数作业参考都是在jupyter下运行的,数据集载入过程一般如下: from cs231n.data_utils import load_CIFAR10 #导入数据集,并打印出数 ...

  6. JDK设计模式之—动态代理

    代理模式的特点 代理模式是常用的java设计模式,它的特征是代理类与委托类有同样的接口.代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类. 代理类的对象并不是真正实现服务,而是通过调用委 ...

  7. [Java]LeetCode237. 删除链表中的节点 | Delete Node in a Linked List

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  8. python之zipfile

    1 简述 zip文件是一个常用的归档和与压缩标准. zipfile模块提供了创建.读取.写入.添加及列出zip文件的工具. zipfile里有2个非常常用的class,分别是Zipfile和ZipIn ...

  9. Java第二次上机随笔

    主要是一些原来不懂但是本次上机涉及到的内容... 一.空数组与数组为null的区别 1.空数组: int[] array = new int[0]; array.length == 0; 空数组是一个 ...

  10. 一个 Vue & Node 的全栈小项目

    约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...