How do I use Glyphs/Icons with Bootswatch theme?

230 views Asked by At

I am trying to use Glyphs with a bootswatch theme, but when I include the CDN for glyphs it affects the theme (making the elements smaller for a start).

How should I code this?

xxx.html

<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- This line seems to cause the problem, but is required for glyphs -->
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
        
        <link rel="stylesheet" href="https://bootswatch.com/4/sandstone/bootstrap.min.css">
    </head>

    <body class="{% block body_class %}{% endblock %}">
      <div class="container">
        <p>User icon on a styled link button:
          <a href="#" class="btn btn-info btn-lg">
            <span class="glyphicon glyphicon-user"></span> User 
          </a>
        </p> 
      </div>
    </body>
</html>
1

There are 1 answers

0
Psionman On

Being new to we design there is a lot to learn, and I've now realised the power of Octicons nad especially Iconify.

So the above can be achieved by

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
...
<a href="#" class="btn btn-info btn-lg">
    <span class="iconify" data-icon="octicon:person-24" data-inline="false"></span> User 
</a>