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

Fontello , działanie marginesów.

Object Storage Arubacloud
0 głosów
113 wizyt
pytanie zadane 24 lutego 2017 w HTML i CSS przez Mariusz Andrzejewski Początkujący (360 p.)

Witam, ponawiam swoje pytanie...dalczego nie moge przesunąć ikony youtube i google plus w lewo tak aby były na środku.W fotello.css Margin-top działa natomiast margin-right nie.Może jest tak dlatego,że ikonka zajmuje już cała szerokość diva w którym jest umieszczony? Niby to banalne ...nie rozumiem.

HTML:

<!DOCTTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Mariusz Andrzejewski - Portfolio </title>
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudni 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="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato|Open+Sans" rel="stylesheet"/>
	
	
</head>
<body>
	<div id="container">
	
		<div class="rectangle">
			<div id="logo">Mariusz Andrzejewski</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-squared"></i>
			</div>
			<div class="fb">
				<i class="icon-facebook"></i>
				</div>
			<div class="gplus"><i class="icon-gplus"></i>
			</div>
			<div class="tw"><i class="icon-twitter"></i></div>
			<div style="clear: both;"></div>
		
			
		</div>		
			<div style= "clear: both;"></div>
		
			
			
		
		
		<div class="rectangle">2017 &copy; Mariusz Andrzejewski.Programista webowy zaprasza do wsppołpracy</div>
		
		
	</div>

</body>
</html>

STYLE CSS

body
{
background-color: #303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;

}

#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	
}
.rectangle
{
	width: 960px;
	margin: 20px;
	text-align: center;
}
.square
{
	width: 50%;
	float: left;
	
}
#logo
{
	float: left;
	ffont-family: 'Josefin Sans', sans-serif;
	font-size: 40px; 
	width: 600px;
	text-align: left;

	
}
#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 40px; 
	text-align: left;
	
}
.tile1
{
float:left;
width:230px;
margin: 10px;
height: 142px; 
background-color: #3095d3;
}
.tile2
{
float:left;
width:230px;
margin: 10px;
height: 142px; 
background-color: #666666;
}
.tile3
{
float:left;
width:230px;
margin: 10px;
height: 142px; 
background-color: #93c748;
}
.tile4
{
float:left;
width:480px;
margin: 10px;
height: 142px; 
background-color: #ee5a32;	
}
.tile5
{
 background-color: #666666;
 width: 480px;
 margin: 10px;
 height: 304px;
}
.yt
{

 width: 105px;
 margin: 10px;
 height: 142px; 
 background-color: #d94348;
 float: left;
}
.fb
{

 width: 105px;
 margin: 10px;
 height: 142px; 
 background-color: #4668b3;
 float: left;
}
.gplus
{

 width: 105px;
 margin: 10px;
 height: 142px; 
 background-color: #d95333;
 float: left;
}
.tw
{

 width: 105px;
 margin: 10px;
 height: 142px; 
 background-color: #3095d3;
 float: left;
}

FONTELLO.CSS

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?3256876');
  src: url('../font/fontello.eot?3256876#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?3256876') format('woff2'),
       url('../font/fontello.woff?3256876') format('woff'),
       url('../font/fontello.ttf?3256876') format('truetype'),
       url('../font/fontello.svg?3256876#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?3256876#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-mail:before { content: '\e800';} /* '' */
.icon-twitter:before { content: '\f099'; font-size: 76px; margin-top: 35px;} /* '' */
.icon-facebook:before { content: '\f09a';font-size: 76px; margin-top: 35px; } /* '' */
.icon-gplus:before { content: '\f0d5';font-size: 70px; margin-top: 35px;margin-right: 5px;} /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-laptop:before { content: '\f109'; } /* '' */
.icon-youtube-squared:before { content: '\f166'; font-size: 76px; margin-top: 35px; margin-right: 5px;} /* '' */
.icon-graduation-cap:before { content: '\f19d'; } /* '' */

DEMO.HTML

<!DOCTYPE html>
<html>
  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <meta charset="UTF-8"><style>/*
 * Bootstrap v2.2.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
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;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner,
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;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
.span9 {
  width: 700px;
}
.span8 {
  width: 620px;
}
.span7 {
  width: 540px;
}
.span6 {
  width: 460px;
}
.span5 {
  width: 380px;
}
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  content: "";
  line-height: 0;
}
.container:after {
  clear: both;
}
p {
  margin: 0 0 10px;
}
.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}
small {
  font-size: 85%;
}
h1 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1 small {
  font-weight: normal;
  line-height: 1;
  color: #999;
}
h1 {
  line-height: 40px;
}
h1 {
  font-size: 38.5px;
}
h1 small {
  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: 'fontello';
      src: url('./font/fontello.eot?12255340');
      src: url('./font/fontello.eot?12255340#iefix') format('embedded-opentype'),
           url('./font/fontello.woff?12255340') format('woff'),
           url('./font/fontello.ttf?12255340') format('truetype'),
           url('./font/fontello.svg?12255340#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
     
     
    .demo-icon
    {
      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); */
    }
     </style>
    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->
    <script>
      function toggleCodes(on) {
        var obj = document.getElementById('icons');
      
        if (on) {
          obj.className += ' codesOn';
        } else {
          obj.className = obj.className.replace(' codesOn', '');
        }
      }
      
    </script>
  </head>
  <body>
    <div class="container header">
      <h1>
        fontello
         <small>font demo</small>
      </h1>
      <label class="switch">
        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
      </label>
    </div>
    <div id="icons" class="container">
      <div class="row">
        <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-mail">&#xe800;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe800</span></div>
        <div title="Code: 0xf099" class="the-icons span3"><i class="demo-icon icon-twitter">&#xf099;</i> <span class="i-name">icon-twitter</span><span class="i-code">0xf099</span></div>
        <div title="Code: 0xf09a" class="the-icons span3"><i class="demo-icon icon-facebook">&#xf09a;</i> <span class="i-name">icon-facebook</span><span class="i-code">0xf09a</span></div>
        <div title="Code: 0xf0d5" class="the-icons span3"><i class="demo-icon icon-gplus">&#xf0d5;</i> <span class="i-name">icon-gplus</span><span class="i-code">0xf0d5</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf0e0" class="the-icons span3"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
        <div title="Code: 0xf109" class="the-icons span3"><i class="demo-icon icon-laptop">&#xf109;</i> <span class="i-name">icon-laptop</span><span class="i-code">0xf109</span></div>
        <div title="Code: 0xf166" class="the-icons span3"><i class="demo-icon icon-youtube-squared">&#xf166;</i> <span class="i-name">icon-youtube-squared</span><span class="i-code">0xf166</span></div>
        <div title="Code: 0xf19d" class="the-icons span3"><i class="demo-icon icon-graduation-cap">&#xf19d;</i> <span class="i-name">icon-graduation-cap</span><span class="i-code">0xf19d</span></div>
      </div>
    </div>
    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
  </body>
</html>

 

2 odpowiedzi

0 głosów
odpowiedź 24 lutego 2017 przez imklau Nałogowiec (42,090 p.)
"text-align: center" nie wyśrodkowuje przypadkiem fontello?
 komentarz 24 lutego 2017 przez Mariusz Andrzejewski Początkujący (360 p.)
Niesty nie działa...przynajmnie u mnie.
 komentarz 24 lutego 2017 przez imklau Nałogowiec (42,090 p.)
Nie wiem w czym problem, mi na Twojej stronie wyświetliły się ikonki na środku
 komentarz 24 lutego 2017 przez Mariusz Andrzejewski Początkujący (360 p.)
Pobrałem nowe(inne) ikonki i jest ok...nie mniej nie rozumiem dlaczego nie moge ich przesuwać w lewo i prawo za pomoca polecania margin-right...
 komentarz 24 lutego 2017 przez imklau Nałogowiec (42,090 p.)
Przecież robisz to na podstawie filmiku, więc powinieneś porównać sobie z kodem, który jest tam pokazany
0 głosów
odpowiedź 24 lutego 2017 przez matte Nowicjusz (200 p.)
Możesz wrzucić na codepen lub fiddle?

Podobne pytania

0 głosów
1 odpowiedź 103 wizyt
Działanie marginesów
pytanie zadane 23 lutego 2017 w HTML i CSS przez Mariusz Andrzejewski Początkujący (360 p.)
0 głosów
1 odpowiedź 184 wizyt
HTML odc 3 - CSS - LAMPP - fontello
pytanie zadane 13 maja 2019 w HTML i CSS przez Valmai Nowicjusz (150 p.)
0 głosów
1 odpowiedź 146 wizyt
CSS - przesunięte fontello
pytanie zadane 24 sierpnia 2018 w HTML i CSS przez exim Nowicjusz (140 p.)

92,551 zapytań

141,393 odpowiedzi

319,523 komentarzy

61,936 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...