CSS字体图标

最新推荐文章于 2025-06-10 05:58:31 发布

Pruett

最新推荐文章于 2025-06-10 05:58:31 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： html css js

本文链接：https://blog.youkuaiyun.com/Pruett/article/details/79437844

html css js 专栏收录该内容

19 篇文章

订阅专栏

1.优点

可以做出跟图片一样可以做的事情,改变透明度,旋转度等.
本质是文字,可以随意的改变颜色,产生阴影,透明效果等.
本身体积更小, 但携带的信息不变.
几乎支持所有浏览器,,,移动端必备的

2.使用流程

1.UI人员实际字体图标效果图(svg)
2.前端人员上传生成兼容性字体文件包,下面这两个网站可以将svg文件转化为相应的字体.也可以从这两个网站上找现成的下载来用
http://icomoon.io 国外
http://iconfont.cn 国内
3.前端人员下载兼容字体文件包到本地
4.把字体文件包引入到HTML页面中
以国外的网站为例,操作如下:
* 进入网站,选择右上角的 IcoMoonApp 点击进入,如下:
* 这里写图片描述
* 然后选择需要的字体图标, 变白色的带黄方框的就是选择了的,正下方的中间位置会提示选择了几个, 如果不够,可以点击左下角的Add icons From Library… 选择自己喜欢的, 选择完成后点击右下角的Generate Font 进行下载.
* 这里写图片描述
* 点击了Generate Font进入下面的页面, 选择下方的download进行下载,(download后面有个设置的图标,可以进行设置文件名等)
*
*下载下来的压缩包中的文件如下所示,fonts文件夹需要复制到项目中.(demo.html后面有用)

ps:如果没有svg文件可以直接进行第三步,下下来之后,解压,不能将其余的删除,将fonts文件夹放到项目中.

3.使用

3.1如上面,解压后把文件夹放进项目,然后在style 标签或者 css中加入如下代码进行声明:

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?7kkyc2');
  src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), 
  url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
  url('fonts/icomoon.woff?7kkyc2') format('woff'),
  url('fonts/icomoon.svg?7kkyc2') format('svg');
  font-weight: normal;
  font-style: normal;
}

PS:上面的代码基本上是不变的可以直接赋值.注意路径的位置就可以啦,如果.css文件不适合fonts在同一父目录下,需要进行适当的目录修改, 还有文件的名字icomoon.eot等,根据自己fonts中的文件的名字进行更改.

3.2 具体的使用
配置好之后,进行使用,如下:

<style>
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?7kkyc2');
  src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), 
  url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
  url('fonts/icomoon.woff?7kkyc2') format('woff'),
  url('fonts/icomoon.svg?7kkyc2') format('svg');
  font-weight: normal;
  font-style: normal;
}
   span {
           font-family: "icomoon"; //字体名字的意思,这个和上面的设置中的font-family中的值要一样
      //可以对字体图标进行相应的设置
}
</style>

<body>    
   <span></span>
</body>

下面是最重要的,打开刚才提到的demo.html(在解压后的文件中)
如下:
这里写图片描述
第一种方法:点击上图中(在图片中已经点击,并且下划线变蓝的位置),然后右击复制,粘贴到html文件中 body中的span标签中(有的可能没有字,是几个看不见的空出来的位置如: (形如好几个空格)),刷新就能看见了.
第二种方法:上图中的每个图表下面都有类似 e901 e90e的字样,将这个进行复制,然后使用伪类选择器进行添加:

span::before {
font-family: "icomoon";
   content: "\e901";  //前面一定要加  \
}

追加文字图标
如果感觉自己的图标不够用,可以进行追加, 这里写图片描述
进入如上页面,选择左上角的import icons ,选择解压后的文件夹中的selection.json,然后弹窗选择YES,会出现以前的图标,然后选择新的,在进行下载 (所以下载后的压缩包和解压后的文件夹中的文件不要删除,,追加后,可以把之前的删掉了,后面的那个更全,使用后面的执行以上操作就可以啦)