Fontello i PHP

pytanie zadane 1 lipca 2016 w PHP przez Ambroz Obywatel (1,840 p.)
zamknięte 5 października 2016 przez Ambroz

Witajcie.

Chcąc zrobić przykładowe portfolio zgodnie z odcinkiem 3 HTML natknąłem się na problem, gdyż nie działają mi ikonki Fontello: YouTube i Facebook jak na załączonym obrazku:

Fontello i php

Póki co jest tu czysty HTML, ale będzie jeszcze PHP.

Kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
</head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Cempatible" content="IE=edge,chrome=1" />

  <title>Paweł Ambroziak - Portfolio i Twórczość</title>

  <meta name="description" content="Stworzę dla Ciebie stronę WWW oraz film! Zatrudnij Programistę: PHP, JavaScript, HTML, CSS, JQuery, MySQL, WordPress, Joomla. Zatrudnij Profesjonalny Montarz Filmu!!" />
  <meta name="keywords" content="zamów, stronę, tworzenie, www, montarz, php, portfolio, html, javascript, jquery, WordPress, MySQL, Joomla" />
  <link rel="stylesheet" href="style/style.css" type="text/css" />
  <link rel="stylesheet" href="css/fontello.css" type="text/css"/>
  <link href='https://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<body>

  <div id="container">
    <div class="rectangle">
        <div id="logo">Paweł Ambroziak</div>
        <div id="zegar">12:00:00</div>
        <div style="clear:both"></div>
    </div>

    <div class="square">
      <div class="tile1">
        <i class="icon-user"></i><br />Kim Jestem?
      </div>
      <div class="tile1">
        <i class="icon-laptop"></i><br />Co Oferuję?
      </div>
      <div style="clear:both"></div>

      <div class="tile2">
        <i class="icon-vcard"></i><br />Curruculum Vitae
      </div>
      <div class="tile3">
        <i class="icon-gmail"></i><br />Kontakt ze mną
      </div>
      <div style="clear:both"></div>

      <div class="tile4">
        <i>”Problem z programistami jest taki, że nigdy nie da się powiedzieć, co robią, zanim nie jest za późno” </i>– Seymour Cray
      </div>
    </div>
    <div class="square">
      <div class="tile5">
        Tytuł podstrony<br /><br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in maximus risus. Phasellus vitae libero sit amet risus viverra cursus ac ut mi.
        Vestibulum ullamcorper quam quis venenatis vehicula. In eu sem sed nulla condimentum facilisis sit amet at nisi. Pellentesque purus tellus,
        accumsan eu odio ut, rutrum sagittis est. Aenean pharetra ornare turpis, vel tincidunt libero scelerisque quis.
      </div>
      <div class="yt"><i class="icon-youtube"></i>
      </div>
      <div class="fb">
        <i class="icon-facebook-squared"></i>
      </div>
      <div class="gplus">
        <i class="icon-gplus-squared"></i>
      </div>
      <div class="twitch">
        <i class="icon-twitch"></i>
      </div>
      <div style="clear:both"></div>
    </div>
    <div style="clear:both"></div>

    <div class="rectangle">2016 &copy; Paweł Ambroziak - Portfolio. Programista webowy oraz Monter Filmów zaprasza do współpracy!</div>
  </div>

</body>
</html>

P.S Robie wszystko zgodnie tak jak mówi Mirosław Zelent.

Struktura plików:
Pliki

Dzięki wielkie za pomoc.

komentarz zamknięcia: roziwązano problem

2 odpowiedzi

odpowiedź 1 lipca 2016 przez niezalogowany
wybrane 1 lipca 2016 przez Ambroz

Najlepsza

Wyłącz adblocka, juz ktoś miał tu podobny problem.

komentarz 1 lipca 2016 przez Ambroz Obywatel (1,840 p.)

Działa XD

odpowiedź 1 lipca 2016 przez CzikaCarry Szeryf (75,340 p.)

Na pewno pobrałeś dobre ikonki? Może mają inne nazwy. Sprawdź w pliku fontello.css na samym dole nazwy ikonek i porównaj z tymi które wpisałeś.

komentarz 1 lipca 2016 przez Ambroz Obywatel (1,840 p.)

Tak są dobre:

.icon-facebook-squared:before { content: '\e800'; font-size: 76px;margin-top: 30px; } /* '' */
.icon-youtube:before { content: '\e801'; font-size: 76px;margin-top: 30px; } /* '' */
.icon-gplus-squared:before { content: '\e802'; font-size: 76px;margin-top: 30px; } /* '' */
.icon-twitch:before { content: '\e803'; font-size: 76px;margin-top: 30px; } /* '' */
.icon-user:before { content: '\e804'; font-size: 76px;margin-top: 20px; } /* '' */
.icon-laptop:before { content: '\e805'; font-size: 76px;margin-top: 20px; } /* '' */
.icon-graduation-cap:before { content: '\e806'; font-size: 76px;margin-top: 20px; } /* '' */
.icon-vcard:before { content: '\e807'; font-size: 76px;margin-top: 20px; } /* '' */
.icon-gmail:before { content: '\e808'; font-size: 76px;margin-top: 20px; } /* '' */