Problem z Fontello - odgrzewam

pytanie zadane 9 stycznia 2022 w HTML i CSS przez kaczeniec Nowicjusz (180 p.)

Witam!

Przerabiam kurs HTML. Lekcja 3 - stronka z zastosowaniem czcionek z Fontello. U mnie nie wyświetla na stronie ikonek mediów społecznościowych. Podobny problem już kiedyś wystąpił i okazał się błahym błędem. Wydaje mi się, że w moim przypadku błąd też jest banalny, ale po kilku godzinach wpatrywania się w kod jak sroka w kość nie widzę nic. Może ktoś coś wypatrzy?

Oczywiście w katalogu z moim plikiem html mam katalogi "css" i "font" skopiowane z archiwum pobranego z Fontello. Poniżej zamieszczam cały kod mojego pliku html.

Żeby było zabawniej, to plik demo.html z archiwum działa niezawodnie - ikony się wyświetlają - wniosek prosty, to u mnie jest błąd...

Mój system to Ubuntu 20.x

Dziękuję

<!DOCTYPE html>
<html>

<head>
    <title>Strona 3</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="body.css" type="text/css" />
    <link rel="stylesheet" href="css/fontello.css" />



    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,100&family=Lato:wght@300&display=swap" rel="stylesheet">
</head>

<body>
    <div id="container">
        <div class="rectangle"></div>
        <div id="logo">Jan Kowalski</div>
        <div id="zegar">12:58:17</div>
        <div style="clear:both;"></div>
        <div class="square">
            <div class="tile1">1</div>
            <div class="tile1">1</div>
            <div style="clear:both;"></div>
            <div class="tile2">2</div>
            <div class="tile3">3</div>
            <div style="clear:both;"></div>
            <div class="tile4">4</div>
        </div>
        <div class="square">
            <div class="tile5">5</div>
            <div class="yt">
                <i class="icon-youtube"></i>
            </div>
            <div class="fb">
                <i class="icon-facebook-rect"></i>
            </div>
            <div class="gp">
                <i class="icon-googleplus-rect"></i>
            </div>
            <div class="tt">
                <i class="icon-twitter-bird"></i>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
        <div class="rectangle" style="text-align: center;">2021 &copy Jan Kowalski portfolio pp</div>
    </div>
</body>

</html>

komentarz 9 stycznia 2022 przez ScriptyChris Mędrzec (190,190 p.)

Spójrz do konsoli przeglądarki, czy nie ma błędu pobierania ikon - jeśli jest błąd 404, to upewnij się, że ścieżka jest prawidłowa.

komentarz 10 stycznia 2022 przez kaczeniec Nowicjusz (180 p.)

Błąd 404 się nie pojawia. Przypomnę tylko, że plik demo.html z archiwum z Fontello działa prawidłowo - ikonki się wyświetlają. Powiedziałbym, że błąd jest w moim html-u. Ale błędu nie widzę.

2 odpowiedzi

odpowiedź 9 stycznia 2022 przez Wiciorny Ekspert (270,170 p.)
edycja 10 stycznia 2022 przez Wiciorny

odpowiedź 9 stycznia 2022 przez kaczeniec Nowicjusz (180 p.)
edycja 10 stycznia 2022 przez kaczeniec

Zaszło nieporozumienie. W ściągniętym archiwum z Fontello mam pliki jak poniżej. Wszystko skopiowałem do katalogu w którym jest mój html. Moim zdaniem lokalizacja plików i katalogów jest ok. Ikonki nie wyświetlają się.

komentarz 10 stycznia 2022 przez VBService Ekspert (253,340 p.)

to plik demo.html z archiwum działa niezawodnie

wrzuć plik demo.html do katalogu gdzie jest "Twój html" i sprawdź czy zadziała.

komentarz 10 stycznia 2022 przez VBService Ekspert (253,340 p.)

Możesz, proszę, pokazać Twój kod z pliku fontello.css?

komentarz 10 stycznia 2022 przez kaczeniec Nowicjusz (180 p.)

@VBService, plik demo.html działa. Dlatego jestem przekonany o błędzie w moim html-u.

komentarz 10 stycznia 2022 przez kaczeniec Nowicjusz (180 p.)

Czy dobrze rozumiem, że mam tu wkleić zawartość fontello.css?

komentarz 10 stycznia 2022 przez VBService Ekspert (253,340 p.)
edycja 10 stycznia 2022 przez VBService

Brakuje: HTML CODE, teraz zauważyłem ( dla YT  itd. )

Przeanalizuj kod Twojego demo.html z Twojego folderu fontello.

<i class="demo-icon icon-youtube">&#xf167;</i>
<i class="demo-icon icon-facebook-rect">&#xf301;</i>
<i class="demo-icon icon-twitter-bird">&#xf303;</i>
<i class="demo-icon icon-googleplus-rect">&#xf309;</i>

tu wersja bez HTML CODE w kodzie html, użycie ::before i content w css-ie

przykład ( "przerobiony" demo.html )

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <style>
    html {
      font-size: 100%;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    a:focus {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    a:hover,
    a:active {
      outline: 0;
    }
    input {
      margin: 0;
      font-size: 100%;
      vertical-align: middle;
      *overflow: visible;
      line-height: normal;
    }
    input::-moz-focus-inner {
      padding: 0;
      border: 0;
    }
    body {
      margin: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 20px;
      color: #333;
      background-color: #fff;
    }
    a {
      color: #08c;
      text-decoration: none;
    }
    a:hover {
      color: #005580;
      text-decoration: underline;
    }
    .row {
      margin-left: -20px;
      *zoom: 1;
    }
    .row:before,
    .row:after {
      display: table;
      content: "";
      line-height: 0;
    }
    .row:after {
      clear: both;
    }
    .span3 {
      float: left;
      min-height: 1px;
      margin-left: 20px;
      width: 220px;
    }
    .container {
      width: 940px;
      margin-right: auto;
      margin-left: auto;
      *zoom: 1;
    }
    .container:before,
    .container:after {
      display: table;
      content: "";
      line-height: 0;
    }
    .container:after {
      clear: both;
    }
    small {
      font-size: 85%;
    }
    h1 {
      margin: 10px 0;
      font-family: inherit;
      font-weight: bold;
      line-height: 20px;
      color: inherit;
      text-rendering: optimizelegibility;
      line-height: 40px;
      font-size: 38.5px;
    }
    h1 small {
      font-weight: normal;
      line-height: 1;
      color: #999;
      font-size: 24.5px;
    }

    body {
      margin-top: 90px;
    }
    .header {
      position: fixed;
      top: 0;
      left: 50%;
      margin-left: -480px;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
      padding-top: 10px;
      z-index: 10;
    }
    .footer {
      color: #ddd;
      font-size: 12px;
      text-align: center;
      margin-top: 20px;
    }
    .footer a {
      color: #ccc;
      text-decoration: underline;
    }
    .the-icons {
      font-size: 14px;
      line-height: 24px;
    }
    .switch {
      position: absolute;
      right: 0;
      bottom: 10px;
      color: #666;
    }
    .switch input {
      margin-right: 0.3em;
    }
    .codesOn .i-name {
      display: none;
    }
    .codesOn .i-code {
      display: inline;
    }
    .i-code {
      display: none;
    }
    @font-face {
      font-family: 'icon-';
      src: url('./font/icon-.eot?62124611');
      src: url('./font/icon-.eot?62124611#iefix') format('embedded-opentype'),
           url('./font/icon-.woff?62124611') format('woff'),
           url('./font/icon-.ttf?62124611') format('truetype'),
           url('./font/icon-.svg?62124611#icon-') format('svg');
      font-weight: normal;
      font-style: normal;
    }


     /* !!!! TA CZĘŚĆ !!!! */
    .icon-youtube:before { content: '\f167'; } /* '' */
    .icon-facebook-rect:before { content: '\f301'; } /* '' */
    .icon-twitter-bird:before { content: '\f303'; } /* '' */
    .icon-googleplus-rect:before { content: '\f309'; } /* '' */


    .demo-icon {
      font-family: "icon-";
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
    </style>
  </head>
  <body>
    <div class="container" id="icons">
      <div class="row">
        <div class="span3" title="Code: 0xf167">
          <i class="demo-icon icon-youtube"></i>
        </div>
        <div class="span3" title="Code: 0xf301">
          <i class="demo-icon icon-facebook-rect"></i>
        </div>
        <div class="span3" title="Code: 0xf303">
          <i class="demo-icon icon-twitter-bird"></i>
        </div>
        <div class="span3" title="Code: 0xf309">
          <i class="demo-icon icon-googleplus-rect"></i>
        </div>
      </div>
  </body>
</html>

komentarz 10 stycznia 2022 przez kaczeniec Nowicjusz (180 p.)

Zarówno po wprowadzeniu poprawek HTML CODE (w lekcji jest informacja, że są one zbędne) w moim pliku jak i w "przerobionym" pliku demo.html, na Firefoxie, wyskakują mi ikonki ale jak "robaczki". W Operze nadal nie widać nic. Czyżby zła strona kodowania? Jest UTF-8. Problem z kodowaniem przeglądarki, systemu?