Positionnement icônes font awesome

**imothep85** · 22/02/2018, 13h15

Dans mon site j'ai un souci avec mes icônes

il manque quelque chose dans mon html qui m’empêche de positionner mes icônes a gauche au milieu:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<ul class="menu">
<img src="img/cynaptek-logo2018b.png" id="logo">
<li><a id="contact" href="#">Tous</a></li>
<li><a id="web" href="#">Animation</a></li>
<li><a id="produit" href="#">Application</a></li>
<li><a <a id="audiovisuel" href="#">Architecture</a></li>
<li><a id="architecture" href="#">Audiovisuel</a></li>
<li><a id="application" href="#">Produit</a></li>
<li><a id="animation" href="#">Web</a></li>
<li><a id="tous" href="#">Contact</a></li>
</ul></a></li>
</ul>
<br>
<div id="container">
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, commeLe Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, commeLe Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, commeLe Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme</p>
</div>
</div>
<div id="buttons_flex">
        <i class="fab fa-facebook-square fa-2x"></i>
        <i class="fab fa-twitter-square fa-2x"></i>
        <i class="fab fa-linkedin fa-2x"></i>
        <i class="fab fa-google-plus-square fa-2x"></i>
		 <i class="fab fa-youtube-square fa-2x"></i>
		 <i class="fab fa-flickr fa-2x"></i>
    </div>

pour mes icônes j'ai ceci dans mon

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#buttons_flex{
  padding-left:0.2%;
  display: flex;
  align-items: left;
  flex-flow: column; 
}

**vttman** · 22/02/2018, 18h03

Ceci à tester ...
Les classes fab ? changées en fa ...
=>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="menu">
<img src="img/cynaptek-logo2018b.png" id="logo">
<li><a id="contact" href="#">Tous</a></li>
<li><a id="web" href="#">Animation</a></li>
<li><a id="produit" href="#">Application</a></li>
<li><a <a id="audiovisuel" href="#">Architecture</a></li>
<li><a id="architecture" href="#">Audiovisuel</a></li>
<li><a id="application" href="#">Produit</a></li>
<li><a id="animation" href="#">Web</a></li>
<li><a id="tous" href="#">Contact</a></li>
</ul></a></li>
</ul>
<br>
<div id="container">
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, commeLe Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, commeLe Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, commeLe Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme</p>
</div>
</div>
<div id="buttons_flex">
        <i class="fa fa-facebook-square fa-2x"></i>
        <i class="fa fa-twitter-square fa-2x"></i>
        <i class="fa fa-linkedin fa-2x"></i>
        <i class="fa fa-google-plus-square fa-2x"></i>
         <i class="fa fa-youtube-square fa-2x"></i>
         <i class="fa fa-flickr fa-2x"></i>
    </div>

Le css un peu changé
=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.fa #buttons_flex{
  padding-left:0.2%;
  display: flex;
  align-items: left;
  flex-flow: column;
 
}
#buttons_flex{padding:100px}

**imothep85** · 22/02/2018, 19h11

Merci vttman

mais la nouvelle version c’est fab pour brand.

le seul problème que je rencontre maintenant c'est mes icônes sont centrés en bas de page, c'est mieux elles s'affichent bien au centre.

MAIS des que je charge une autre page elles ne sont plus du tout centrées.

je pense que j'ai du mal les positionner dans ma page html.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</head>
<body>
<ul class="menu">
<img src="img/cynaptek-logo2018b.png" id="logo">
<li><a id="tous" href="#">Tous</a></li>
<li><a id="animation" href="#">Animation</a></li>
<li><a id="application" href="#">Application</a></li>
<li><a id="architecture" href="#">Architecture</a></li>
<li><a id="audiovisuel" href="#">Audiovisuel</a></li>
<li><a id="produit" href="#">Produit</a></li>
<li><a id="web" href="#">Web</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul></a></li>
</ul>
<br>
<div id="container">
<div id="main" style="clear:both;"></div>
</div>
</div>
<div id="social_icons">
        <i class="fab fa-facebook-square fa-2x"></i>
        <i class="fab fa-twitter-square fa-2x"></i>
        <i class="fab fa-linkedin fa-2x"></i>
        <i class="fab fa-google-plus-square fa-2x"></i>
		 <i class="fab fa-youtube-square fa-2x"></i>
		 <i class="fab fa-flickr fa-2x"></i>
    </div>
	</div>
<footer id="footer">
<i class="far fa-copyright"></i> Developed by Mattepainting.be 2018</footer>
<script>

dans la page index elles sont bien centrées en bas
mais des que je clique sur la page architecture elles ne sont plus au centre..

http://redbaboon.be/test/index.html#

et mon css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
*{
margin:0;
padding:0;
 
}
html, body
{ 
	height:100%;
	font-family: nunito;
 
}
 
#social_icons{
	overflow:auto;
	justify-content: flex-start;
	padding-bottom:20px;
	font-size: 16px;
	text-align:center;
	clear:both;
}
#footer {
	color:#fff;
	text-align:center;
	padding-top:20px;
    background-color: #3d3d3d;
	position:relative;
	height:20px;
	margin-top:-20px;
	clear:both;
	font-size: 12px;
	z-index:-1;
}
.text
{
	text-align:center;
	height:80px;
	background:#262626;
}
.text h1
{
	margin:0;
	line-height:80px;
	color:#fff;
	font-size:48px;
 
}
 
/* text position */
ul 
{
 
	font-size: 15px;
	margin:0;
	padding:0;
	padding-top:10px;
	padding-bottom:10px;
	background:#3d3d3d;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around ;
}
 
/* logo position */
#logo
{
	position: relative;
    left: 0px;
}
ul li
{
	list-style:none;
 
 
 
}
 
/* menu text position */
ul li a  
{
	text-decoration:none;
	color:#DCDCDC;
	padding:10px;
	display:block;
 
 
}
 
/* unvisited link */
a:link {
    color: white;
}
 
 
/* mouse over link */
a:hover {
    color: tomato;
}
 
/* selected link */
a:active {
    color: white;
} 
 
/* menu position */
.sticky
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
}
 
/* menu text size */
.menu{
	font-size: 15px;
	font-family: nunito;
}
 
 
.fa-facebook, .fa-facebook-square {
    color: #3b5998
}
 
.fa-twitter, .fa-twitter-square {
    color: #00aced
}
 
.fa-linkedin, .fa-linkedin-square {
    color: #007bb6
}
 
.fa-google-plus, .fa-google-plus-square {
    color: #dd4b39
}
 
.fa-youtube, .fa-youtube-play, .fa-youtube-square {
    color: #bb0000
}
 
.fa-flickr {
    color: #ff0084
}
 
/* Container text position */
#container{
	min-height:100%;
	margin-left: 20px;
	margin-top: 10px;
    margin-right: 20px;
 
 
}
 
/* menu text size when greater than 700px screen*/
@media all and (min-width: 700px) {
    .menu{
        font-size: 17.5px;
    }
 
/* menu text size when greater than 900px screen*/
	@media all and (min-width: 900px) {
    .menu{
        font-size: 20px;
    }
 
/* container text padding when greater than 700px screen*/
@media all and (min-width:800px) {
    #container{
    padding-left:20px;
	padding-right:20px;
    }

Invité · 22/02/2018, 20h15

Bonjour,

plusieurs erreurs de structure :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<ul class="menu">
<img src="img/cynaptek-logo2018b.png" id="logo">
<li><a id="tous" href="#">Tous</a></li>

<img> ne peut pas être entre <ul> et <li> (ni rien d'autre d'ailleurs)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<li><a id="contact" href="#">Contact</a></li>
</ul></a></li>
</ul>

des balises en trop ?
Bref : améliore l'INDENTATION, pour y voir plus clair.

**imothep85** · 22/02/2018, 20h45

Merci jreaux62

J'ai corrigé

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<li><a id="contact" href="#">Contact</a></li>
</ul></a></li>
</ul>

par

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<li><a id="contact" href="#">Contact</a></li>
</ul>

Pour

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<ul class="menu">
<img src="img/cynaptek-logo2018b.png" id="logo">
<li><a id="tous" href="#">Tous</a></li>

je sais que je ne devrais pas mettre mon logo la ce n'est pas la bonne place mais je n'arrive pas a le placer en haut dans ma navbar car il faut qu'il soit toujours dans la navbar lorsque l'utilisateur fait défiler le contenu.

Mon problème restant sont mes icônes qui sont bien centrées sur la page index, mais des que je charge par ex la page architecture les icônes ne sont plus a la bonne place...

Positionnement icônes font awesome

Positionnement en CSS

Discussions similaires

Partager

Partager