1. Home

W3.CSS Icons

With W3.CSS you can use the icon library you like, such as

Icon Libraries

With W3.CSS you can use the icon library you like, such as:

  • Font Awesome Icons
  • Google Material Design Icons
  • Bootstrap Icons

    • Using an Icon Library

    To insert an icon:

  • Include the icon library from a CDN (Content Delivery Network) in the <head> section.
  • Add the name of the icon class to any inline HTML element.
    • Tip: The <i> and <span> elements are widely used to add icons.

    To control the size of the icon, change the font-size property of the icon, or use one of the w3-size classes:

  • w3-tiny
  • w3-small
  • w3-large
  • w3-xxlarge
  • w3-xxxlarge
  • w3-jumbo

    • Some Font Awesome Icons


    fa fa-home

    fa fa-bars

    fa fa-arrow-left

    fa fa-arrow-right

    fa fa-search

    fa fa-close

    fa fa-refresh

    fa fa-trash

    fa fa-male

    fa fa-car

    fa fa-truck

    fa fa-plane

    Example

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <body>

    <i class="fa fa-home"></i>
    <i class="fa fa-search"></i>
    <i class="fa fa-cloud"></i>
    <i class="fa fa-trash"></i>

    </body>
    </html>

    For a complete list of icons: Visit our icon reference

    Some Google Material Design Icons

    home
    home
    menu
    menu
    arrow_back
    arrow_back
    arrow_forward
    arrow_forward
    search
    search
    close
    close
    refresh
    refresh
    delete
    delete
    person
    person
    directions_car
    directions_car
    local_shipping
    local_shipping
    local_airport
    local_airport

    Example

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <body>

    <i class="material-icons">home</i>
    <i class="material-icons">search</i>
    <i class="material-icons">cloud</i>
    <i class="material-icons">delete</i>

    </body>
    </html>

    Some Bootstrap Icons


    home

    menu-hamburger

    arrow_back

    arrow_forward

    search

    remove

    refresh

    trash

    user

    file

    print

    plane

    Example

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/w3css/4/w3.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <body>

    <i class="glyphicon glyphicon-home"></i>
    <i class="glyphicon glyphicon-search"></i>
    <i class="glyphicon glyphicon-cloud"></i>
    <i class="glyphicon glyphicon-trash"></i>

    </body>
    </html>

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US