前端-icomoon字体图标对应的content为何会发生变化?

问题描述

icomoon字体图标对应的content为何会发生变化?

请问大家:https://icomoon.io/app/#/select,这个网站的字体图标,同样是全选导出,为何隔一段时间导出后的相同图标的content会不一样,导致我后续增加图标不是查下content就能添加,需要更换字体文件(同一次导出的content都能对上,但不同次就不一定了),是哪里的问题呢?难道是网站又增加了
新图标吗?遇到过几次了,很困惑,求各位解答!

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

.icon {
    display: inline-block;
    font-family: 'icomoon';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #ffbd19;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

 .icon-star-full:before {
    content: "e6d9";     // 如果现在要添加一个图标,去查网站对应图标的content,引入的图标不是预想的那个,需要重新下载字体文件才能对上:C
}

解决方案

http://www.uisdc.com/icomoon-create-custom-icon

解决方案二:

我目前是打开icomoon.svg文件,搜索对应glyph-name,与网站的图标做个匹配,基本误差在3个之内(应该是有新增的图标吧,但如果重新下载会影响之前其他的图标啊,我也不知道为什么要这么操作,为什么要在中间插入新图标。。。)

解决方案三:

我也遇到这问题了,求指导

时间: 2024-12-02 10:24:45

前端-icomoon字体图标对应的content为何会发生变化?的相关文章

svg-我copy一个网页 它的icomoon的图标弄不下来 想请教去哪下这几个字体库

问题描述 我copy一个网页 它的icomoon的图标弄不下来 想请教去哪下这几个字体库 @font-face { font-family:'icomoon'; src:url(IcoMoon-Free-master/icomoon-MBT.eot); src:url(IcoMoon-Free-master/icomoon-MBT.eot?#iefix) format(""embedded-opentype"")url(IcoMoon-Free-master/ico

[ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标

本文作者:sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/ 使用图标美化按钮: http://blog.csdn.net/jfok/article/deta

Bootstrap<基础十一>字体图标(Glyphicons)

原文:Bootstrap<基础十一>字体图标(Glyphicons) 字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构.在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg gly

Bootstrap字体图标无法正常显示的解决方法_javascript技巧

bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1.在html页面引入bootstrap <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xxxx</title> <link href=&qu

BootStrap的glyphicons字体图标问题

问题描述 BootStrap的glyphicons字体图标问题 BootStrap的glyphicons字体图标一部分解码正确,一部分解码错误是为什么?(肯定排除了字体文件的路径问题) 下图是我用浏览器查看CSS的结果,很明显content是一个正方形的就是解码错误的部分,请问有谁知道是为什么吗?怎么解决呢?

BootStrap glyphicons 字体图标实现方法_javascript技巧

相关阅读: 详解Bootstrap glyphicons字体图标 先给大家说下什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标. 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接. 使用bootstrap很久了,内置的 glyphicons 图标,足以满足 小型项目的需求.只需要使用一个样式,即可调出图标.虽然感觉很神奇,一直没

字体图标制作详解

  一.制作前基础知识普及 1.在制作图标前请下载由阿里妈妈MUX提供的矢量图标制作模板; 2.尽量使用illustrator制作矢量图标;有些设计师在ps中使用路径绘制图标再导成SVG,这种方式也是可以的,但是有时会出现一些奇怪的现象,如图形的路径混乱了,图标倾斜了等不可预知的情况,所以还是建议大家在illustrator中绘制矢量图标; 3.将illustrator中绘制的图形另存为SVG格式;最初iconfont平台是支持EPS文件上传的,但是考虑到EPS文件在平台生成过程的不稳定性,所以

Java 实践:JavaFX 桌面应用开发中使用字体图标

在最近的一个 JavaFX 桌面应用开发中,体验了一下将 Font Awesmoe 的字体图标库作为自定义字体运用于桌面应用中.我将其中一些关键代码提取出来编写成了FontawesomeWithJavaFX 示例程序供大家交流.下载 Font Awesome 这是一个 web app 常用的可以进行自定义缩放矢量图标, 其大小,颜色,阴影等,都可通过 CSS 进行修饰. Overview 预备知识 了解一下 JavaFX JavaFX 简单的说,就是用于 Java 开发桌面应用的.对于曾经使用过

WPF自定义控件与样式(1)-矢量字体图标(iconfont)

原文:WPF自定义控件与样式(1)-矢量字体图标(iconfont) 一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用,因此Winform.WPF中都是可以用的. 在我们多个WPF项目中广泛使用了图标字体,包括自定义控件.自定义样式.模板等.总结下: 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常