icon图标库

最新推荐文章于 2024-07-28 11:37:18 发布

张小凡vip

最新推荐文章于 2024-07-28 11:37:18 发布

阅读量9.8k

点赞数 2

分类专栏： web web模块积累文章标签： icon 图标

本文链接：https://blog.csdn.net/zzq900503/article/details/46633225

版权

web 同时被 2 个专栏收录

142 篇文章 2 订阅

订阅专栏

web模块积累

47 篇文章 1 订阅

订阅专栏

简介

什么是图标字体？

图标字体不同于标准的字体数字的字符，是一种包含符号和字形（如箭头、文件夹、放大镜）的字体文件。

例如：

图标字体的使用就像和使用网页字体一样，个人理解就是把一些图标以字体的形式保存在一个字体文件里面，然后再以调用字体的方式来使用。具体使用方法详情可以去看看css中的@font-face的用法，在这里就不详细解释了。

免费图标字体可以完美的运用在你的界面设计中，可以让你更快捷的设计出更精彩的界面。

很多UI框架都提供了图标的直接引用

比如bootstrap。

使用方法

图标字体目前基本上有两种方式。

一种是引用框架js或者字体库，然后让class= 我们需要的样式名

例如：@import url(http://weloveiconfonts.com/api/?family=zocial);/* zocial */[class*="zocial-"]:before {font-family: 'zocial', sans-serif;}

<ul>

</ul>

第二种是选中我们需要的图标生成我们自己的字体库，然后下载到本地，引用后，直接使用编号

ps：有一些网站只能下载到svg格式的文件，这些文件的使用方法也是第二种，需要到另外的网站上上传制作字体库。

http://fontello.com/ 就能制作

选中完后会生成编码，要记住哪些编码对应哪些图标

在css中引用

	/*Entypo font*/
@font-face {
    font-family: 'FontomasEmtypo';
    src: url('entypo/fontomas-webfont.eot');
    src: url('entypo/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('entypo/fontomas-webfont.woff') format('woff'),
         url('entypo/fontomas-webfont.ttf') format('truetype'),
         url('entypo/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html中引用：

<div class="box">
  <span class="key">!</span>
  <span class="fontomas"> ! </span>
  <span class="hex"> ! </span>
  <span class="cssContent">content:'!'</span>
</div>