Próbuję użyć GitHub's primer i octicons. Po zainstalowaniu obu wersji zacząłem używać klas css zdefiniowanych przez GitHub, włączając plik build.css do mojego dokumentu HTML. Jak wskazałbym projekt na wszystkie ikony svg, które daje mi octicons?Jak korzystać z podkładu i okuć GitHub?

<!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

[edytuj] Krótka odpowiedź: to node_modules/octicons/build/font/octicons.css

To działa, bez ikon SVG. Jeśli chcesz użyć ikon svg, prawdopodobnie powinieneś dołączyć te obrazy przy użyciu tagów <img>. Jednak użycie czcionki znacznie ułatwia to.

<!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>

Edit

A jeśli czujesz taką potrzebę, tutaj jest wersja korzystania svg dydaktycznego:

<!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>

Źródło

2016-07-18 01:08:20 Lennart

Dlaczego zawierać 'src: url ('node_modulles/octicons/build/font/octicons.woff') Format ('WOFF')' linie? wydaje się, że 'node_modules' jest błędnie napisane, skomentowałem to i wszystko nadal działało, więc czy te linie nie są wymagane? – mbigras

Dobry połów. Są również zawarte w 'octicons/build/font/octicons.css', więc nie są potrzebne. Sądzę, że uwzględniłem je, ponieważ najpierw użyłem niewłaściwego pliku css. – Lennart

W chwili pisania tego artykułu 'npm install ohticons' nie zawiera katalogu' font' lub pliku 'octicons.css'. Nie jestem pewien co z tym. – shacker

Zastosowanie Bower zainstalować Octicons.

bower.json:

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

Następnie odwołuje się do biblioteki gdzie twoi Altanka odbywają się:

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

Źródło

2016-07-25 21:11:45

Dlaczego nie wystarczy użyć linku cdn lub pobrać stamtąd?

<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">

Źródło

2016-08-04 01:23:24 allenhwkim

Ponieważ nie są one aktualizowane. – Droidzone

Jak korzystać z podkładu i okuć GitHub?

Odpowiedz

Edit

Powiązane problemy