Skip to content

Commit dd15c31

Browse files
CodeWithNavCodeWithNav
committed
icons
1 parent afa34da commit dd15c31

File tree

5 files changed

+139
-30
lines changed

5 files changed

+139
-30
lines changed

‎aboutus.html.html

Lines changed: 58 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@
1414
rel="stylesheet"
1515
href="node_modules/bootstrap/dist/css/bootstrap.css"
1616
/>
17+
<link
18+
rel="stylesheet"
19+
href="node_modules/font-awesome/css/font-awesome.min.css"
20+
/>
21+
<link
22+
rel="stylesheet"
23+
href="node_modules/bootstrap-social/bootstrap-social.css"
24+
/>
1725
<link rel="stylesheet" href="css/styles.css" />
1826
</head>
1927

@@ -22,7 +30,8 @@
2230
<div class="container">
2331
<a class="navbar-brand" href="./index.html.html"
2432
>Ristorante Con Fusion</a
25-
><button
33+
>
34+
<button
2635
class="navbar-toggler"
2736
type="button"
2837
data-toggle="collapse"
@@ -33,13 +42,25 @@
3342
<div class="collapse navbar-collapse" id="Navbar">
3443
<ul class="navbar-nav mr-auto">
3544
<li class="nav-item">
36-
<a class="nav-link" href="./index.html.html">Home</a>
45+
<a class="nav-link" href="./index.html.html"
46+
><span class="fa fa-home fa-lg"> </span>Home</a
47+
>
3748
</li>
3849
<li class="nav-item active">
39-
<a class="nav-link" href="#">About</a>
50+
<a class="nav-link" href="#"
51+
><span class="fa fa-info fa-lg"></span> About</a
52+
>
53+
</li>
54+
<li class="nav-item">
55+
<a class="nav-link" href="#"
56+
><span class="fa fa-list fa-lg"></span> Menu</a
57+
>
58+
</li>
59+
<li class="nav-item">
60+
<a class="nav-link" href="#"
61+
><span class="fa fa-address-card fa-lg"></span> Contact</a
62+
>
4063
</li>
41-
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
42-
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
4364
</ul>
4465
</div>
4566
</div>
@@ -161,19 +182,42 @@ <h5>Our Address</h5>
161182
121, Clear Water Bay Road<br />
162183
Clear Water Bay, Kowloon<br />
163184
HONG KONG<br />
164-
Tel.: +852 1234 5678<br />
165-
Fax: +852 8765 4321<br />
166-
Email: <a href="mailto:[email protected]">[email protected]</a>
185+
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br />
186+
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br />
187+
<i class="fa fa-envelope fa-lg"></i>:
188+
<a href="mailto:[email protected]">[email protected]</a>
167189
</address>
168190
</div>
169191
<div class="col-12 col-sm-4 align-self-center">
170192
<div class="text-center">
171-
<a href="http://google.com/+">Google+</a>
172-
<a href="http://www.facebook.com/profile.php?id=">Facebook</a>
173-
<a href="http://www.linkedin.com/in/">LinkedIn</a>
174-
<a href="http://twitter.com/">Twitter</a>
175-
<a href="http://youtube.com/">YouTube</a>
176-
<a href="mailto:">Mail</a>
193+
<a
194+
class="btn btn-social-icon btn-google"
195+
href="http://google.com/+"
196+
><i class="fa fa-google-plus"></i
197+
></a>
198+
<a
199+
class="btn btn-social-icon btn-facebook"
200+
href="http://www.facebook.com/profile.php?id="
201+
><i class="fa fa-facebook"></i
202+
></a>
203+
<a
204+
class="btn btn-social-icon btn-linkedin"
205+
href="http://www.linkedin.com/in/"
206+
><i class="fa fa-linkedin"></i
207+
></a>
208+
<a
209+
class="btn btn-social-icon btn-twitter"
210+
href="http://twitter.com/"
211+
><i class="fa fa-twitter"></i
212+
></a>
213+
<a
214+
class="btn btn-social-icon btn-google"
215+
href="http://youtube.com/"
216+
><i class="fa fa-youtube"></i
217+
></a>
218+
<a class="btn btn-social-icon" href="mailto:"
219+
><i class="fa fa-envelope"></i
220+
></a>
177221
</div>
178222
</div>
179223
</div>

‎css/styles.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@ body {
3434
z-index: 0;
3535
}
3636
.navbar-dark {
37-
background-color: #929292;
38-
color: black;
39-
opacity: 0.85;
37+
background-color: #772188;
38+
4039
font-weight: bold;
4140
}

‎index.html.html renamed to ‎index.html

Lines changed: 56 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@
1414
rel="stylesheet"
1515
href="node_modules/bootstrap/dist/css/bootstrap.css"
1616
/>
17+
<link
18+
rel="stylesheet"
19+
href="node_modules/font-awesome/css/font-awesome.min.css"
20+
/>
21+
<link
22+
rel="stylesheet"
23+
href="node_modules/bootstrap-social/bootstrap-social.css"
24+
/>
1725
<link rel="stylesheet" href="css/styles.css" />
1826
</head>
1927

@@ -32,13 +40,25 @@
3240
<div class="collapse navbar-collapse" id="Navbar">
3341
<ul class="navbar-nav mr-auto">
3442
<li class="nav-item active">
35-
<a class="nav-link" href="#">Home</a>
43+
<a class="nav-link" href="#"
44+
><span class="fa fa-home fa-lg"></span> Home</a
45+
>
46+
</li>
47+
<li class="nav-item">
48+
<a class="nav-link" href="./aboutus.html.html"
49+
><span class="fa fa-info fa-lg"></span> About</a
50+
>
51+
</li>
52+
<li class="nav-item">
53+
<a class="nav-link" href="#"
54+
><span class="fa fa-list fa-lg"></span> Menu</a
55+
>
3656
</li>
3757
<li class="nav-item">
38-
<a class="nav-link" href="./aboutus.html.html">About</a>
58+
<a class="nav-link" href="#"
59+
><span class="fa fa-address-card fa-lg"></span> Contact</a
60+
>
3961
</li>
40-
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
41-
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
4262
</ul>
4363
</div>
4464
</div>
@@ -124,19 +144,42 @@ <h5>Our Address</h5>
124144
121, Clear Water Bay Road<br />
125145
Clear Water Bay, Kowloon<br />
126146
HONG KONG<br />
127-
Tel.: +852 1234 5678<br />
128-
Fax: +852 8765 4321<br />
129-
Email: <a href="mailto:[email protected]">[email protected]</a>
147+
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br />
148+
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br />
149+
<i class="fa fa-envelope fa-lg"></i>:
150+
<a href="mailto:[email protected]">[email protected]</a>
130151
</address>
131152
</div>
132153
<div class="col-12 col-sm-4 align-self-center">
133154
<div class="text-center">
134-
<a href="http://google.com/+">Google+</a>
135-
<a href="http://www.facebook.com/profile.php?id=">Facebook</a>
136-
<a href="http://www.linkedin.com/in/">LinkedIn</a>
137-
<a href="http://twitter.com/">Twitter</a>
138-
<a href="http://youtube.com/">YouTube</a>
139-
<a href="mailto:">Mail</a>
155+
<a
156+
class="btn btn-social-icon btn-google"
157+
href="http://google.com/+"
158+
><i class="fa fa-google-plus"></i
159+
></a>
160+
<a
161+
class="btn btn-social-icon btn-facebook"
162+
href="http://www.facebook.com/profile.php?id="
163+
><i class="fa fa-facebook"></i
164+
></a>
165+
<a
166+
class="btn btn-social-icon btn-linkedin"
167+
href="http://www.linkedin.com/in/"
168+
><i class="fa fa-linkedin"></i
169+
></a>
170+
<a
171+
class="btn btn-social-icon btn-twitter"
172+
href="http://twitter.com/"
173+
><i class="fa fa-twitter"></i
174+
></a>
175+
<a
176+
class="btn btn-social-icon btn-google"
177+
href="http://youtube.com/"
178+
><i class="fa fa-youtube"></i
179+
></a>
180+
<a class="btn btn-social-icon" href="mailto:"
181+
><i class="fa fa-envelope"></i
182+
></a>
140183
</div>
141184
</div>
142185
</div>

‎package-lock.json

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,8 @@
573573
"license": "ISC",
574574
"dependencies": {
575575
"bootstrap": "^4.0.0",
576+
"bootstrap-social": "^5.1.1",
577+
"font-awesome": "^4.7.0",
576578
"jquery": "^3.3.1",
577579
"popper.js": "^1.12.9"
578580
}

0 commit comments

Comments
 (0)