navigation.html won’t update

[Wordius]

Having a few problems getting source/custom/havigation.html to reflect changes I have made.

I added my Twitter account, which worked fine, but I switched to using ‘Mono Social Icon Font’ from Foundation icons and now it outputs text links to Twitter, GitHub and RSS instead of the new icons I have added.

I don’t understand why this is happening, especially as I have actually deleted the text links, so it shouldn’t be possible to serve them, bearing in mind I made all the changes in source and the Twitter text link, for example, is not even present in the Theme version of navigation.html.

Any suggestions appreciated.

[TheChymera]

How did you "switch to using ‘Mono Social Icon Font"? We do not provide that functionality (alternate icons).

What I believe happened is that you tried to hard-code your image into source/custom/havigation.html.
This is not how we import the images.
We use mixins.
Doing it any other way would require some hacking on your part - also I would like to note that there is no custom folder under source, so I have even less of an idea what you actually did.

[Wordius]

Thanks for the response. My mistake: source/_includes/custom/navigation.html.

I created a partial ‘_mono-social-icons.scss’ in the ‘partials’ folder and imported it to ‘_partials.scss’. It contains:

`@font-face {
font-family: 'Mono Social Icons Font';
src: url('../fonts/MonoSocialIconsFont-1.10.eot');
src: url('../fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
url('../fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
url('../fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

a.symbol:before {
content: attr(title);
margin-right: 0.3em;
font-size: 130%;
}`

Then in navigation.html, I added:

{% if site.twitter_user %}
<ul class="subscription">
<li><a href="http://twitter.com/{{ site.twitter_user }}" rel="subscribe-twitter" title="Twitter"><span class='symbol'>circletwitterbird</span></a></li>
</ul>
{% endif %}

As an example. But the output I get is:

[TheChymera]

And what would be the expected result? It seems like you are just changing the font. Is this a font that has icons for characters? Does googlefonts provide it? Are you sure you are loading it correctly?

[Wordius]

The expected outcome would be Mono Social Icon styles for Twitter, GitHub and RSS served as a font. The font has icons for characters, but it’s not on googlefonts – I’m using other fonts from Typekit instead of Google.

Pretty sure I am loading properly. The icon font is stored in source/fonts, the stylesheet is in source/stylesheets, so the following path looks right to me:

src: url('../fonts/MonoSocialIconsFont-1.10.eot');

rake preview seems to be a bit hit and miss about updating changes to the stylesheet, so I have checked the .css file has the correct paths in it too.