Issues using imported fontello font bundle

Any ideas here? Am I doing something wrong?

I also used simpltestme to run the demo and try to import fontello icons. It doesn't work there either.

I'm looking in the fontello.fix.css file and it appears to contain the markup that is missing from my site to make the contents work. Maybe it's not being applied correctly? Where is that diff supposed to go? On my main style sheet?

I am using the business bootstrap theme. I applied the info from fontello.fix.css to bootstrap.css in the theme. Now I am getting the following markup when I try to invoke an icon on a page. Now at least it's got some of the same markup that comes from the admin page. This is better than what I was getting, but the icon is still not rendering.

element.style {
}
testmedia="all"
.icon.fontello {
background: none;
display: inline-block;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
vertical-align: inherit;
width: auto;
}
testmedia="all"
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
testmedia="all"
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheeti, cite, em, var, address, dfn {
font-style: italic;
}
Pseudo ::before element
testmedia="all"
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
testmedia="all"
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo element
testmedia="all"
::selection {
background-color: #4484c7;
}
testmedia="all"
::selection {
color: #ffffff;
}
Inherited from body.html.not-front.logged-in.no-sidebars.page-node.page-node-.page-node-45.node-type-page.admin-menu
testmedia="all"
body {
color: #444;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
line-height: 160%;
}
testmedia="all"
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
Inherited from html.js
testmedia="all"
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
testmedia="all"
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;

On this diff: http://cgit.drupalcode.org/fontello/commit/?id=263797d

It shows:

-.fontello[class^="icon-"],
-.fontello[class*=" icon-"] {

That markup was supposed to come out somehow, but it's still showing up on my inspect element. Where does that need to come out? Maybe that's what's keeping the icons from rendering?

You'll have to excuse me. I'm no better than a rote hacker but I think I'm figuring this out? I just realized that fontello.fix.css is supposed to be added to some of the css in the font bundle downloaded from fontello, right? However, I cannot figure out where it's supposed to go, and it does not look like it's getting added properly. I've checked the css files and can't find anything in there with the code from fontello.fix.css. Where is it supposed to go?

Doing some more looking - this is more clear on simplytest because my host uses computed style sheets so it's tough to get to which style sheet. Anyway, looking at the demo on simplytest, it shows that in the admin menu, the site is going to fontello.fix.css for the style sheet, but on the regular page, it's going to style.css instead.

Here is the markup I get from the page on simplytestme:

element.style {
}
1media="all"
p {
margin: 0 0 1.2em;
}
user agent stylesheetp {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
Inherited from div.content.clearfix
1media="all"
.node .content {
font-size: 1.071em;
}
Inherited from body.html.not-front.logged-in.one-sidebar.sidebar-first.page-node.page-node-.page-node-1.node-type-page.toolbar.toolbar-drawer
1media="all"
body, body.overlay {
color: #3b3b3b;
}
1media="all"
body, #site-slogan, .ui-widget, .comment-form label {
font-family: Georgia, "Times New Roman", Times, serif;
}
1media="all"
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

Here's the markup I get from the admin page on simplytestme:

element.style {
}
asdfmedia="all"
.icon.fontello {
background: none;
display: inline-block;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
vertical-align: inherit;
width: auto;
}
asdfmedia="screen"
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, td.menu-disabled, ul.links, ul.links.inline, ul.links li, .block ul, div.admin, tr.even, tr.odd, tr.drag, tbody, tbody th, thead th, .breadcrumb, .item-list .icon, .item-list .title, .item-list ul, .item-list ul li, ol.task-list li.active, .form-item, tr.odd .form-item, tr.even .form-item, .form-item .description, .form-item label, .form-item label.option, .form-checkboxes, .form-radios, .form-checkboxes .form-item, .form-radios .form-item, .marker, .form-required, .more-link, .more-help-link, .item-list .pager, .item-list .pager li, .pager-current, .tips, ul.primary, ul.primary li, ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.secondary, ul.secondary li, ul.secondary a, ul.secondary a.active, .resizable-textarea {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
user agent stylesheeti, cite, em, var, address, dfn {
font-style: italic;
}
Pseudo ::before element
asdfmedia="all"
.icon-glass:before {
content: '\e800';
}
asdfmedia="all"
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "test";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
/* font-size: 120%; */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
Inherited from div#page
asdfmedia="screen"
#page {
padding: 20px 0 40px 0;
margin-right: 40px;
margin-left: 40px;
background: #fff;
position: relative;
color: #333;
}
Inherited from div#overlay-content.clearfix
asdfmedia="all"
#overlay-content {
background: #fff;
clear: both;
color: #000;
padding: .5em 1em;
position: relative;
}
Inherited from body.html.not-front.logged-in.no-sidebars.page-admin.page-admin-config.page-admin-config-media.page-admin-config-media-icon.page-admin-config-media-icon-bundle.page-admin-config-media-icon-bundle-asdf.overlay.toolbar.toolbar-drawer
asdfmedia="screen"
body {
color: #000;
background: #fff;
font: normal 81.3%/1.538em "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

I don't know for sure, but this is what it looks like to me. I think that maybe it's not passing this bundle check in fontello_process_attached($bundle_name), and returning instead of attaching fix.css

edit: removed unnecessary code

The simplytestme platform has about 8 minutes left:

http://s92cdc0215596de8.s3.simplytest.me/

u: admin
p: admin

Ok sorry - didn't really know the rules on that - still fairly green.