• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z Fontello - odgrzewam

VPS Starter Arubacloud
+2 głosów
413 wizyt
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

0 głosów
odpowiedź 9 stycznia 2022 przez Wiciorny Ekspert (269,120 p.)
edycja 10 stycznia 2022 przez Wiciorny

Skoro mówisz, że masz katalog font- to dlaczego podajesz katalog sam css i plik  "fontello" ? Upewnij się gdzie to się znajduje czy nie przypadkiem jak piszesz w katalogu font 

 <link rel="stylesheet" href="css/fontello.css" />
 

względnie sprawdź plik fontello który masz w katalogu, dokonaj na nim zmiany i sprawdź czy są one widoczne na stronie jak nie masz odp gdzie szukać 

0 głosów
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 (251,210 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 (251,210 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 (251,210 p.)
edycja 10 stycznia 2022 przez VBService

Brakuje: HTML CODE, teraz zauważyłem ( dla YT &#xf167; itd. )  wink

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?

komentarz 10 stycznia 2022 przez kaczeniec Nowicjusz (180 p.)
Czy jest to problem z UBUNTU?

Uruchomiłem swoją stronę na Win10 i bezproblemowo wyświetla ikonki...

Ale dlaczego demo z Fontello działa?!

Podobne pytania

0 głosów
1 odpowiedź 144 wizyt
0 głosów
1 odpowiedź 416 wizyt
pytanie zadane 28 grudnia 2019 w HTML i CSS przez Jule czka Nowicjusz (160 p.)
0 głosów
1 odpowiedź 126 wizyt
pytanie zadane 15 grudnia 2019 w HTML i CSS przez Jule czka Nowicjusz (160 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...