Menu icon Foundation
Social Webicons not working after migrating to Foundation SASS

I've just migrated from Foundation CSS to Foundation SASS.

I've noticed that the Social Webicons have stopped working.
I was wondering if it's compatible with Foudation SASS and if there are alternatives I should consider?

FYI, the commented out code is the code I had for Foundation.css

I've only copied the Foundation SASS files over to my existing project and commented out the Foundation CSS related items in the Header/Footer and inserted Foundation SASS items as per instructions from Foundation site.

<div id="foot">
    <link rel="stylesheet" href="/site/templates/css/webicons.css" />

    <div>
        <a class="webicon twitter" href="XX">Likes us on Twitter</a>
        <a class="webicon facebook" href="XX">Like us on Facebook</a>
        <a class="webicon googleplus" href="XX">Like us on Google+</a>

    </div>

    <div id ="footerButtons" class="button-bar">
        <a class='button' href='/Datenschutzerklarung/'>Datenschutz</a>
        <a class='button' href='/impressum/'>Impressum</a>
    </div>

    <div>
        Copyright © <?php echo date("Y"); ?> XXXXXXX All Rights Reserved
    </div>
</div>


<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
<!--
<script src="/site/templates/js/vendor/jquery.js"></script>
<script src="/site/templates/js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>
-->
</body>
</html>
            

         

Foundation SassSocial WebiconsMigration

I've just migrated from Foundation CSS to Foundation SASS.

I've noticed that the Social Webicons have stopped working.
I was wondering if it's compatible with Foudation SASS and if there are alternatives I should consider?

FYI, the commented out code is the code I had for Foundation.css

I've only copied the Foundation SASS files over to my existing project and commented out the Foundation CSS related items in the Header/Footer and inserted Foundation SASS items as per instructions from Foundation site.

<div id="foot">
    <link rel="stylesheet" href="/site/templates/css/webicons.css" />

    <div>
        <a class="webicon twitter" href="XX">Likes us on Twitter</a>
        <a class="webicon facebook" href="XX">Like us on Facebook</a>
        <a class="webicon googleplus" href="XX">Like us on Google+</a>

    </div>

    <div id ="footerButtons" class="button-bar">
        <a class='button' href='/Datenschutzerklarung/'>Datenschutz</a>
        <a class='button' href='/impressum/'>Impressum</a>
    </div>

    <div>
        Copyright © <?php echo date("Y"); ?> XXXXXXX All Rights Reserved
    </div>
</div>


<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
<!--
<script src="/site/templates/js/vendor/jquery.js"></script>
<script src="/site/templates/js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>
-->
</body>
</html>
            

         

This post has been closed. No new replies can be added.

Francis Chung about 4 years ago

I should put in fully qualified paths rather than relying on the paths as per the Foundation Example.
(i.e. /site/templates/js/ instead js/)

Issue closed.