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

problem ze znakami z fontello

0 głosów
2,200 wizyt
pytanie zadane 6 maja 2015 w HTML i CSS przez TenTakiTam Bywalec (2,460 p.)
edycja 6 maja 2015 przez TenTakiTam

Witam przerabiam właśnie 3 odc. kursu html pana Mirosława i mam problem ze znakami z strony fotello. Wszystkie się dublują wie może ktoś jak to naprawć?

html:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title>Wiktor Godlewski - Portfolio</title>
    
    <meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal." />
    <meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css, WordPress, Joomla, Drupal" />
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="css/fontello.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    
    <script src="timer.js"></script>
        
</head>

<body>
    
    <div id="container">
    
        <div class="rectangle">
            <div id="logo">Wiktor Godlewski</div>
            <div id="zegar">12:00:00</div>
            <div style="clear: both;"></div>
        </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"></div>
            <div class="fb"><i class="icon-facebook"></div>
        </div>
        <div style="clear: both;"></div>
        <div class="rectangle">
        2015 &copy; Wiktor Godlewski - Portfolio. Programinsa webowy zaprasza do współpracy! <i class="icon-mail-alt"> wiktorgodlewskipl@gmail.com
        </div>
    </div>
    
</body>
</html>

css

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?31113857');
  src: url('../font/fontello.eot?31113857#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?31113857') format('woff'),
       url('../font/fontello.ttf?31113857') format('truetype'),
       url('../font/fontello.svg?31113857#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?31113857#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  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); */
}
 
.icon-user:before { content: '\e800'; } /* '' */
.icon-mail:before { content: '\e801'; } /* '' */
.icon-mail-alt:before { content: '\e802'; } /* '' */
.icon-youtube:before { content: '\e803'; } /* '' */
.icon-facebook:before { content: '\e804'; } /* '' */
.icon-laptop:before { content: '\e805'; } /* '' */
.icon-graduation-cap:before { content: '\e806'; } /* '' */

2 odpowiedzi

+4 głosów
odpowiedź 6 maja 2015 przez Arkadiusz Waluk Ekspert (291,530 p.)
wybrane 6 maja 2015 przez TenTakiTam
 
Najlepsza

Nie masz zamkniętych znaczników <i> z ikonkami - bardzo możliwe, że to przez to coś się rozjeżdża.

Powinno być np. tak:

<div class="yt"><i class="icon-youtube"></i></div>
komentarz 6 maja 2015 przez TenTakiTam Bywalec (2,460 p.)
Dzięki sam byb na to nigdy nie wpadł
komentarz 6 maja 2015 przez Arkadiusz Waluk Ekspert (291,530 p.)
Trzeba było uważniej oglądać wideo pana Mirosława, było tam wyraźnie pokazane, że te znaczniki trzeba zamykać ;)

Ale nie ma sprawy :)
0 głosów
odpowiedź 6 maja 2015 przez kotfuterkowy Dyskutant (9,220 p.)
Pokaż źródła index.html oraz css/fontello.css

Podobne pytania

0 głosów
1 odpowiedź 761 wizyt
pytanie zadane 28 grudnia 2019 w HTML i CSS przez Jule czka Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 1,065 wizyt
pytanie zadane 29 marca 2017 w HTML i CSS przez MateuszS Nowicjusz (190 p.)
0 głosów
1 odpowiedź 453 wizyt
pytanie zadane 7 sierpnia 2017 w Systemy operacyjne, programy przez Vickul Stary wyjadacz (12,850 p.)

93,742 zapytań

142,678 odpowiedzi

323,297 komentarzy

63,328 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

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...