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

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

i'm locally hosting icons in form of fonts, using @font-face in font.css.sass file, , referencing in generic style.css.scss file. (i've copy-pasted-modified site generating social media icons, perfecticons.com. icons appear expected in browsers except firefox. so, firefox receives , renders other @font-face fonts no issue.

perhaps problem related svg file used social icons, , way firefox handles that?

nb. asset_url below rails 4 , 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 , (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'si'; src: asset_url('socicon.svg') format(svg); } }

and 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 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'

the format specifiers need in quotes 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; }

css ruby-on-rails firefox fonts