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");
}

  

时间: 2024-10-16 09:26:28

css字体图标的使用方法的相关文章

CSS字体图标的制作方法

想制作字体图标, 需要先访问这个网站 , http://fontawesome.io/ 如果打开太慢可以用这个 ,http://www.bootcss.com/p/font-awesome/ 反正是一样的. 下载之后可以看到以下这些文件 , font中是字体, less和scss是css的源文件,src中是一些实例文件 自己动手写个demo, 目录如下 demo.html代码如下 <!doctype html> <html> <head> <meta charse

字体图标的制作方法

1.图标的制作: 原料是需要有标准的svg图标 知乎引导教程:http://www.zhihu.com/question/29054543 实际操作的第三方网站:https://icomoon.io/app/#/select,类似网站还有http://iconfont.cn(隶属阿里,需要注册) 在网站上传svg文件,然后可以下载到打包的其他格式的文字文件及对应的demo; 2.使用 /* 字体声明部分,声明为jdf*/         @font-face {           font-f

字体图标库使用方法

一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www.bootcss.com/p/cikonss/ 以第一个链接网站里的字体为例 选择自己需要图标,点击右下角下载下来 继续点击右下角--点击下载 然后下载的文件一般都是这几个基本部件 把fonts文件夹复制到自己的项目中根目录中 打开css文件 把代码复制到自己的某个css文件中,然后html引用,重点

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

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

iconfont字体图标的使用方法

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

CSS3属性+iconfont字体图标的使用方法

CSS3属性文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色: 可以多组值共同存在,用逗号隔开多层文本阴影的设置:text-shadow:第一层,第二层,第三层: 文本换行: 在单词内部换行: word-wrap:: normal:默认值,不允许在单词内部换行. break-word:允许单词内部换行. word-break:: break-all 允许在单词内部换行 keep-all 允许在换行点换行,单词内部不换行盒子阴影: box-shadow:水平阴影 垂直阴影 模糊度

CSS字体图标

字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真. 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的.此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦.. 这就是字体图标(iconfont). 字体图标优点  可以做出跟图片一样可以做的事情,改变透明度.旋转度,等.. 

css字体图标的制作

我介绍的这个办法是直接在 "阿里巴巴图标库"中制作的,方便快捷 1. 首先到 "阿里巴巴图标库"中找到你想要的图片,然后选择加入购物车 接着我们点击右上角的购物车,你会看右下角有"下载代码",点击它,就成功了第一步了,拿到了css的字体图标了 2.打开你下载下来的那个文件夹,其实有用的就我用红色笔圈到的那一部分,其他的你也可以看看 然后,把iconfont.css文件引入页面,(或者把iconfont.css的代码拷贝到你的css文件中,这样子的

字体图标使用笔记

字体图标使用笔记: 优缺点: 首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 优点: 加载文件体积小 统一展示风格,使用方法 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单 可以添加一些视觉效果如:阴影.旋转.透明度 兼容IE6 后期维护成本很低 缺点: 制作门槛有点高,需要借助专业的工具生成字库文件 需要服务器做些相应的配置来解决识别问题和跨域问题 两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Fon