所以我正在使用icomoon，并且有一组11个图标，每次我缩小我们网站的CSS时，这些图标都会中断并显示正方形。图标使用未缩小的 CSS 正确显示。
所有其他 icomoon 图标，包括在同一页面上使用的图标，都可以使用未迷你和缩小的 CSS 正确显示。当我采用 11 种不起作用的图标字体之一，并将其上传到页面上其他图标字体工作的位置或网站的不同部分时，图标仍然会中断。
尝试重新上传图标(以及各种其他内容(，但该组图标仍然不起作用。
以前有没有人遇到过这种情况/关于如何解决的任何建议？
这是 icomoon style.css 文件(前 11 个图标不起作用(：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?543yc3');
src: url('fonts/icomoon.eot?543yc3#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?543yc3') format('truetype'),
url('fonts/icomoon.woff?543yc3') format('woff'),
url('fonts/icomoon.svg?543yc3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-collection:before {
content: "e92d";
}
.icon-data-mapping:before {
content: "e92e";
}
.icon-eca:before {
content: "e92f";
}
.icon-ecm:before {
content: "e930";
}
.icon-legal-project-management .path1:before {
content: "e931";
color: rgb(242, 108, 56);
}
.icon-legal-project-management .path2:before {
content: "e932";
margin-left: -0.9892578125em;
color: rgb(6, 92, 115);
}
.icon-legal-project-management .path3:before {
content: "e933";
margin-left: -0.9892578125em;
color: rgb(51, 51, 51);
}
.icon-legal-project-management .path4:before {
content: "e934";
margin-left: -0.9892578125em;
color: rgb(10, 152, 189);
}
.icon-legal-project-management .path5:before {
content: "e935";
margin-left: -0.9892578125em;
color: rgb(51, 51, 51);
}
.icon-legal-project-management .path6:before {
content: "e936";
margin-left: -0.9892578125em;
color: rgb(51, 51, 51);
}
.icon-esi:before {
content: "e937";
}
.icon-file-analysis:before {
content: "e938";
}
.icon-integration-hub .path1:before {
content: "e939";
color: rgb(255, 255, 255);
}
.icon-integration-hub .path2:before {
content: "e93a";
margin-left: -1.5283203125em;
color: rgb(242, 108, 56);
}
.icon-integration-hub .path3:before {
content: "e93b";
margin-left: -1.5283203125em;
color: rgb(10, 152, 189);
}
.icon-legal-hold:before {
content: "e93c";
}
.icon-production:before {
content: "e93d";
}
.icon-review:before {
content: "e93e";
}
.icon-cloud:before {
content: "e928";
}
.icon-integrations:before {
content: "e929";
}
.icon-nav-arrow:before {
content: "e92a";
}
.icon-newsletter-icon:before {
content: "e92b";
}
.icon-platform:before {
content: "e92c";
}
.icon-share-may16:before {
content: "e900";
}
.icon-sort-may16:before {
content: "e901";
}
.icon-tag-may16:before {
content: "e902";
}
.icon-arrow-may16:before {
content: "e903";
}
.icon-back-may16:before {
content: "e904";
}
.icon-external-link-may16:before {
content: "e905";
}
.icon-home-may16:before {
content: "e906";
}
.icon-important-may16:before {
content: "e907";
}
.icon-quote-may16:before {
content: "e908";
}
.icon-search-may16:before {
content: "e909";
}
.icon-sensitive:before {
content: "e355";
}
.icon-blog-post:before {
content: "e600";
}
.icon-menu:before {
content: "e601";
}
.icon-case-study:before {
content: "e602";
}
.icon-datasheet:before {
content: "e603";
}
.icon-e-book:before {
content: "e604";
}
.icon-infographic:before {
content: "e605";
}
.icon-webcast:before {
content: "e606";
}
.icon-whitepaper:before {
content: "e607";
}
.icon-rss:before {
content: "e608";
}
.icon-twitter:before {
content: "e609";
}
.icon-facebook:before {
content: "e60a";
}
.icon-googleplus:before {
content: "e60b";
}
.icon-linkedin:before {
content: "e60c";
}
.icon-comment:before {
content: "e60d";
}
.icon-news:before {
content: "e60e";
}
.icon-events:before {
content: "e60f";
}
.icon-live-webcast:before {
content: "e610";
}
.icon-solutionbrief:before {
content: "e611";
}
.icon-analyst-reports:before {
content: "e612";
}
.icon-contributed-articles:before {
content: "e613";
}
.icon-in-the-news:before {
content: "e614";
}
.icon-calculators:before {
content: "e615";
}
.icon-act:before {
content: "e616";
}
.icon-cloud-first:before {
content: "e617";
}
.icon-collaboration:before {
content: "e618";
}
.icon-cost-reduction:before {
content: "e619";
}
.icon-defensibility:before {
content: "e61a";
}
.icon-detect:before {
content: "e61b";
}
.icon-ease-of-use:before {
content: "e61c";
}
.icon-elasticity:before {
content: "e61d";
}
.icon-integration2:before {
content: "e61e";
}
.icon-interoperability:before {
content: "e61f";
}
.icon-know-more-sooner:before {
content: "e620";
}
.icon-multinational:before {
content: "e621";
}
.icon-reduce-review-cost:before {
content: "e622";
}
.icon-reporting:before {
content: "e623";
}
.icon-scalability:before {
content: "e624";
}
.icon-track:before {
content: "e625";
}
.icon-visibility:before {
content: "e626";
}
.icon-export:before {
content: "e627";
}
.icon-newspaper:before {
content: "e628";
}
.icon-in:before {
content: "e629";
}
.icon-play:before {
content: "e62a";
}
.icon-envelope:before {
content: "e62b";
}
.icon-slideshow:before {
content: "e62c";
}
.icon-close:before {
content: "e62d";
}
.icon-easeofuse-mar16:before {
content: "e90a";
}
.icon-enterprise-scalability-mar16:before {
content: "e90b";
}
.icon-defensible-mar16:before {
content: "e90c";
}
.icon-visualization-mar16:before {
content: "e90d";
}
.icon-interoperability-mar16:before {
content: "e90e";
}
.icon-consolidate-mar16:before {
content: "e90f";
}
.icon-identifiy-sensitive-data-mar16:before {
content: "e910";
}
.icon-track-mar16:before {
content: "e911";
}
.icon-act-mar16:before {
content: "e912";
}
.icon-detect-mar16:before {
content: "e913";
}
.icon-adaptability-mar16:before {
content: "e914";
}
.icon-preditibility-mar16:before {
content: "e915";
}
.icon-project-management-mar16:before {
content: "e916";
}
.icon-visibility-mar16:before {
content: "e917";
}
.icon-ease-of-use-mar16:before {
content: "e918";
}
.icon-legal-hold-mar16:before {
content: "e919";
}
.icon-interoperability2-mar16:before {
content: "e91a";
}
.icon-elasticity-and-scalability-mar16:before {
content: "e91b";
}
.icon-cloud-mar16:before {
content: "e91c";
}
.icon-collaboration-mar16:before {
content: "e91d";
}
.icon-data-mapping-mar16:before {
content: "e91e";
}
.icon-eddm-mar16:before {
content: "e91f";
}
.icon-integrations-mar16:before {
content: "e920";
}
.icon-products-mar16:before {
content: "e921";
}
.icon-platform-mar16:before {
content: "e922";
}
.icon-cloud-one-mar16:before {
content: "e923";
}
.icon-defensibility-mar16:before {
content: "e924";
}
.icon-one-click-mar16:before {
content: "e925";
}
.icon-reduced-costs-mar16:before {
content: "e926";
}
.icon-know-more-sooner-mar16:before {
content: "e927";
}
.icon-reduce-storage:before {
content: "e9c7";
}
.icon-merge:before {
content: "ea58";
}在这里解决了问题。
因此，CSS的缩小版本是高于未缩小版本的文件夹级别，并且是从其级别的文件夹中的一组过时的字体中提取的。未最小化的版本是从放置在其级别的文件夹中的更新字体中提取的。
希望将来有人看到这一点，这可以为他们节省大量时间来解决一个非常愚蠢的问题:)