lundi 20 avril 2015

How are glyph icons loaded in /fonts?

Solution at bottom.

Bootstrap novice here - I've read that Bootstrap expects glyphicons to be in the /fonts directory (by default).

I've downloaded files from glyphicons.com - over 1200 PNG files (they include Mac). The file names don't match - they have names like glyphicons-225-chevron-right.png ("s" and "-225") instead of glyphicon-chevron-right that my code calls for. I copied the "chevron-right" and "left files, changed the names to match, moved the files in "glyphicon" folder under "fonts", loaded the 1225 files directly into the "fonts" folder, etc.

I've searched, but no answers that work for me (Stackoverflow had the most hits). I've searched w3, Bootstrap, examined the source HTML from Bootswatch and others.

I am using bootstrap css files from Bootswatch, jquery from googleapis, js from bootstrapcdn.


Solution = add:

I do not know how it ended up in my code, but I found it (missing the closing >) near the bottom of the one example I found that did work.


The following clipped from the first answer worked (I think) the first time I tried it. Now it does not, even after I added the "bootstrap-glyphicons.css"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="http://ift.tt/1xwklwE"></script>
      <script src="http://ift.tt/1qIredN"></script>
    <![endif]-->
  </head>
  
<body>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

</body>
</html>

Aucun commentaire:

Enregistrer un commentaire