So I'm using icomoon and have a group of 11 icons that break and just show squares every time I minify our site's CSS. The icons display properly with unminified CSS.
All other icomoon icons, including those used on the same page, display properly with both unminifed and minified CSS. When I take one of the 11 icon fonts that does not work, and I upload it to a spot on the page where a different icon font was working, or to a different part of the site, the icon still breaks.
Have tried reuploading the icons (plus a variety of other things) and that group of icons still does not work.
Has anyone encountered this before / any advice on how to fix?
Here is the icomoon style.css file (the top 11 icons do not work):
@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";
}Figured out the issue here.
So the minified version of the CSS was a folder level above the unminified version and was pulling from an outdated set of fonts in a folder at its level. The unminfied version was pulling from updated fonts that were placed in a folder at its level.
Hope someone sees this in the future and it saves them a bunch of time that went into solving a pretty dumb issue :)