Edit This Code:
See Result »
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../lib/w3.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <body class="w3-container"> <p>w3-small:</p> <div class="w3-topnav w3-small w3-black"> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#"><i class="fa fa-home w3-small"></i></a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">W3Schools</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 1</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 2</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 3</a> </div> <p>w3-medium:</p> <div class="w3-topnav w3-orange"> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#"><i class="fa fa-home w3-large"></i></a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">W3Schools</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 1</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 2</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 3</a> </div> <p>w3-large:</p> <div class="w3-topnav w3-large w3-red"> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#"><i class="fa fa-home w3-large"></i></a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">W3Schools</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 1</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 2</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 3</a> </div> <p>w3-xlarge:</p> <div class="w3-topnav w3-xlarge w3-blue"> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#"><i class="fa fa-home w3-xlarge"></i></a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">W3Schools</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 1</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 2</a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">Link 3</a> </div> <p>w3-xxlarge:</p> <div class="w3-topnav w3-xxlarge w3-green"> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#"><i class="fa fa-home w3-xxlarge"></i></a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">W3Schools</a> </div> <p>w3-xxxlarge:</p> <div class="w3-topnav w3-xxxlarge w3-teal"> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#"><i class="fa fa-home w3-xxxlarge"></i></a> <a href="tryit.asp-filename=tryw3css_nav_font_awesome.html#">W3Schools</a> </div> </body> </html>
Result: