Ich versuche, GitHub primer und octicons zu verwenden. Nach der Verwendung von npm, um beide zu installieren, begann ich, die von GitHub definierten CSS-Klassen zu verwenden, indem ich die build.css-Datei in mein HTML-Dokument einfügte. Wie würde ich das Projekt auf alle Svg-Symbole zeigen, die mir octicons gibt?Wie benutzt man GitHub's Primer und Octicons?

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Hello Primer</title> 
    <link rel="stylesheet" href="node_modules/primer-css/build/build.css"> 
</head> 

<body> 
    <form> 
     <div class="input-group"> 
      <input class="form-control" type="text" placeholder="Username"> 
      <span class="input-group-button"> 
     <button class="btn"> 
     <span class="octicon octicon-clippy"></span> 
      </button> 
      </span> 
     </div> 
    </form> 
</body> 

</html>

2016-07-11 mbigras

[Bearbeiten] kurze Antwort: include node_modules/octicons/build/font/octicons.css

Dies funktioniert, ohne svg Symbole. Wenn Sie die SVG-Symbole verwenden möchten, sollten Sie die Bilder wahrscheinlich mit Tags einschließen. Die Verwendung einer Schriftart erleichtert dies jedoch erheblich.

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Hello Primer</title> 
    <link rel="stylesheet" href="node_modules/primer-css/build/build.css"> 
    <link rel="stylesheet" href="node_modules/octicons/build/font/octicons.css"> 
</head> 

<body> 
    <form> 
     <div class="input-group"> 
      <input class="form-control" type="text" placeholder="Username"> 
      <span class="input-group-button"> 
       <button class="btn"> 
        <span class="octicon octicon-clippy"></span> 
       </button> 
      </span> 
     </div> 
    </form> 
</body> 

</html>

bearbeiten

Und wenn Sie wirklich die Notwendigkeit spüren, hier ist eine Version svg ‚s mit:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Hello Primer</title> 
    <link rel="stylesheet" href="node_modules/primer-css/build/build.css"> 
    <link rel="stylesheet" href="node_modules/octicons/build/octicons.css"> 
</head> 

<body> 
    <form> 
     <div class="input-group"> 
      <input class="form-control" type="text" placeholder="Username"> 
      <span class="input-group-button"> 
       <button class="btn"> 
        <span class="octicon octicon-clippy"></span> 
        <img src="node_modules/octicons/lib/svg/clippy.svg"></img> 
       </button> 
      </span> 
     </div> 
    </form> 
</body> 

</html>

Quelle

2016-07-18 01:08:20 Lennart

Warum schließen Sie die 'src: url ('node_modulles/octicons/build/font/octicons.woff') Format ('woff')' Linien? es scheint, als ob 'node_modules' falsch geschrieben ist, ich habe es auskommentiert und alles funktioniert noch, also sind diese Zeilen nicht erforderlich? – mbigras

Guter Fang. Sie sind auch in "octicons/build/font/octicons.css" enthalten und werden nicht benötigt. Ich denke, ich habe sie eingefügt, weil ich zuerst die falsche CSS-Datei benutzt habe. – Lennart

Zum jetzigen Zeitpunkt enthält 'npm install octicons' kein 'font'-Verzeichnis oder eine' octicons.css'-Datei. Nicht sicher, was los ist. – shacker

Verwenden Bower Octicons zu installieren.

bower.json:

{ 
    "name": "my-app", 
    ... 
    "dependencies": { 
     "octicons": "4.3.0", 
    } 
}

Dann verlinken auf, wo Ihre Bower Bibliotheken festgehalten werden:

<link href="/libs/octicons/build/font/octicons.css" rel="stylesheet">

Quelle

2016-07-25 21:11:45

Warum verwenden wir CDN Link nicht nur, oder von dort herunterladen?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Primer/3.0.1/css/primer.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">

Quelle

2016-08-04 01:23:24 allenhwkim

Weil diese nicht aktualisiert werden. – Droidzone

Wie benutzt man GitHub's Primer und Octicons?

Antwort

bearbeiten

Verwandte Themen