Icons used via fonts (hosted locally) won't display in Firefox - css

Question

I'm locally hosting my icons in the form of fonts, using #font-face in font.css.sass file, and referencing that in a generic style.css.scss file. (I've essentially copy-pasted-modified from a site for generating social media icons, PerfectIcons.com. The icons appear exactly as expected in all browsers except Firefox. Even so, Firefox receives and renders my other #font-face fonts with no issue.
Perhaps the problem is related to the svg file that is used for the social icons, and the way Firefox handles that?
NB. the asset_url below is something for Rails 4 and Heroku.
#font-face {
font-family: 'si';
src: asset_url('socicon.eot');
src: asset_url('socicon.eot?#iefix') format(embedded-opentype),
asset_url('socicon.woff') format(woff),
asset_url('socicon.ttf') format(truetype),
asset_url('socicon.svg') format(svg);
font-weight:400;
font-style:normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'si';
src: asset_url('socicon.svg') format(svg);
}
}
And then the style.css.scss:
.soc
overflow: hidden
margin: 0
padding: 0
list-style: none
text-align: right
margin-right: 100px
.soc li
display: inline-block
*display: inline
zoom: 1
.soc li a
font-family: si !important
font-style: normal
font-weight: 400
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
-ms-box-sizing: border-box
-o-box-sizing: border-box
box-sizing: border-box
text-decoration: none
text-align: center
display: block
position: relative
z-index: 1
width: 35px
height: 35px
line-height: 35px
font-size: 19px
#include border-radius(50px)
color: #c9c8c8
background-color: #383838
opacity: .8
.soc-icon-last
margin: 0 !important
.soc-twitter:before
content: 'a'
.soc-facebook:before
content: 'b'
.soc-google:before
content: 'c'

Answer 1

The format specifiers need to be in quotes as shown below:
#font-face {
font-family: 'si';
src: asset_url('socicon.eot');
src: asset_url('socicon.eot?#iefix') format('embedded-opentype'),
asset_url('socicon.woff') format('woff'),
asset_url('socicon.ttf') format('truetype'),
asset_url('socicon.svg') format('svg');
font-weight:400;
font-style:normal;
}

Answer 2

Just replace this code with your code:
#font-face {
font-family: 'si';
src: url('<%= asset_path('socicon.eot') %>');
src: url('<%= asset_path('socicon.eot) + '?#iefix' %>') format('embedded-opentype'),
url('<%= asset_path('socicon.woff') %>') format('woff'),
url('<%= asset_path('socicon.ttf') %>') format('truetype'),
url('<%= asset_path('socicon.svg') %>') format('svg');
font-weight:400;
font-style:normal;
}
Change css file extention to .css.scss.erb