Google provides a set of 750 icons designed under "material design guidelines" and these are known as Material Design
icons. These icons are simple and they support all modern web browsers.
Since these icons are vector based, they are scalable as well. To use
these icons, we have to load the font (library) material-icons.
Labels
.
Search Your Article
Total Pageviews
Thursday, March 16, 2017
Material - Action Icons
This chapter explains the usage of Google's (Material) Action Icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Alert Icons
This chapter explains the usage of Google's (Material) Alert icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - AV Icons
This chapter explains the usage of Google's (Material) AV icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Communication Icons
This chapter explains the usage of Google's (Material) Communication icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Content Icons
This chapter explains the usage of Google's (Material) Content icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Device Icons
This chapter provides you the usage of Google's (Material) Device Icons. Assume that custom is the CSS class name in which we defined the size and colour as shown below.
<style> i.custom {font-size: 2em; color: green;} </style>
Material - Editor Icons
This chapter explains the usage of Google's (Material) Editor icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Hardware Icons
This chapter explains the usage of Google's (Material) Hardware icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Image Icons
This chapter explains the usage of Google's (Material) Image icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html>
Material - Maps Icons
This chapter explains the usage of Google's (Material) Maps icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html>
Material - Navigation Icons
This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Notification Icons
This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Social Icons
This chapter explains the usage of Google's (Material) Social icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Material - Toggle Icons
This chapter explains the usage of Google's (Material) Toggle icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html> <html> <head>
Bootstrap Glyphicons
This is a library of monochromatic icons available in raster image
formats, vector image formats, and as fonts. It provides over 250 glyphs
in font format. You can use these fonts in your web projects. These
glyphs are not free, however if you don't have to spend anything in case
you are using them in Bootstrap based projects.
Bootstrap Components
This chapter explains the usage of Bootstrap Glyphicons (Components). Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<html> <head> <link rel = "stylesheet" href = <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Web Icons - Useful Resources
The following resources contain additional information on Web Icons. Please use them to get more in-depth knowledge on this.
Discuss Web Icons
We have a number of Icon Fonts (libraries) available that can be used
on HTML pages just the way we use normal text fonts. Font Awesome,
Bootstrap Glyphicons, and Google's Material Icons are the prominent Icon
Fonts used frequently by web developers. This tutorial explains how to
use these Icon Fonts in practice.
Web - Basic Concepts
What is Internet?
The Internet is essentially a global network of computing resources. You can think of the Internet as a physical collection of routers and circuits as a set of shared resources.Some common definitions given in the past include −
Web - How it Works ?
On the simplest level, the Web physically consists of the following components −
- Your personal computer − This is the PC at which you sit to see the web.
- A Web browser − A software installed on your PC which helps you to browse the Web.
- An internet connection − This is provided by an ISP and connects you to the internet to reach to any Website.
Web - Browser Types
Web Browsers are software installed on your PC. To access the Web,
you need a web browser, such as Netscape Navigator, Microsoft Internet
Explorer or Mozilla Firefox.
Currently you must be using any sort of Web browser while you are navigating through our site tutorialspoint.com.
Currently you must be using any sort of Web browser while you are navigating through our site tutorialspoint.com.
Web - Server Types
Every Website sits on a computer known as a Web server. This server
is always connected to the internet. Every Web server that is connected
to the Internet is given a unique address made up of a series of four
numbers between 0 and 255 separated by periods. For example,
68.178.157.132 or 68.122.35.127.
Web - Site Advantages
If you are constructing a Website, then we hope you are aware of its
advantages as well. Here, in this chapter, we have listed out a few
major advantages of keeping a website.
Web - Skills Required
If you are planning to maintain a Website, then you would require a
specific set of skills. This skillset can be endless because today,
there are numerous technologies available and many are coming everyday.
So you have to plan and affirm on any one of the available technologies
and go ahead for your project.
Web - Tools Required
As a basic necessity, you need a good internet connection from a
reliable service provider which provides decent connectivity and speed.
Evaluate vendors based on their services and support before selecting.
Here due diligence plays a major part.
The following tools and infrastructure will help you in developing a Website −
The following tools and infrastructure will help you in developing a Website −
Web - Domain Names
A domain name is the part of your Internet address that comes after "www". For example, in Tutorialspoint.com the domain name is tutorialspoint.com.
A domain name becomes your Business Address so care should be taken to select a domain name. Your domain name should be easy to remember and easy to type.
A domain name becomes your Business Address so care should be taken to select a domain name. Your domain name should be easy to remember and easy to type.
Web - Site Construction
Now you are ready for a website construction. Before proceeding
further, you have to take many factors into consideration. I cannot list
out each and everything but I have described the major factors in this
tutorial which will help you to have a better website −
Web - Hosting Concepts
Web hosting deals with putting the contents of your website on a Web
server. Hosting your website on your own server could be an option. But
this will become very much expensive unless you are hosting a site like
yahoo.com or google.com. So this tutorials does not cover how to set up
your own hosting server.
Web - Ecommerce Hosting
Ecommerce is a way of doing business through Internet. You are doing
ecommerce, especially when you are selling your products or services
through Internet. If you planning to put a website which will have
transactions such as buying or selling items or services, then it means
you are going to setup an ecommerce website.
Web - Site Backup
Your server's hard drive crashed. Your site is hacked and the hacker
deleted all your files. Your web host disappeared with your money and
your data. Even worse, there was and earth quack and your ISP building
is gone down and everything is lost.
Web - Site Statistics
Once your site is up and running, it is important that you track your
visitors and analyze what they are using. You should have a detailed
information on the following −
- Who is your visitor? − You should have your site visitor
IP address available with you to know the geographical location and
identity of that visitor.
Web - Site Popularity
You designed a website and developed it and finally hosted it. Now
just think how many site visitors know about this site address and
related service.
If you want to make your site a success, then the actual work starts after hosting your website successfully. It includes the following actions, but gaining popularity is certainly not limited to these actions.
If you want to make your site a success, then the actual work starts after hosting your website successfully. It includes the following actions, but gaining popularity is certainly not limited to these actions.
Web - Free Graphics
Graphic elements play a crucial role on any website. If you have time
and talent to design your web graphics, then it is great. It does not
only require time and talent to have web graphics, but you need to spend
a good deal of money as well to buy good graphics software like Paint
Shop Pro or Adobe Photoshop.
Web - Summary
We do hope that you found this tutorial useful and informative. Here we have covered all the basics of Web and Web Hosting.
Now it is time to move forward and we will encourage you to start developing your website using our HTML Tutorial.
Now it is time to move forward and we will encourage you to start developing your website using our HTML Tutorial.
Web - Quick Guide
Web - Basic Concepts
What is Internet?
The Internet is essentially a global network of computing resources. You can think of the Internet as a physical collection of routers and circuits as a set of shared resources.Some common definitions given in the past include −
Web - Useful Resources
The following resources contain additional information on Web
Developers Guide. Please use them to get more in-depth knowledge on
this.
Useful Links on Web Development
- W3C Consortium - Official web site of W3C Consortium. This site should be book marked for easy access.
Discuss Web Development
This tutorial provides a simple and practical way of understanding the
essential areas of developing a website. It also provides elementary
insights and an overview of the subject that is necessary to understand
the world of web technologies. This tutorial covers all that is required
to become a good Web Developer.
W3.CSS - Overview
What is W3.CSS?
W3.CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.Some of its salient features are as follows:
W3.CSS - Environment Setup
How to Use W3.CSS?
There are two ways to use W3.CSS:- Local Installation - You can download the W3.CSS file on your local machine and include it in your HTML code.
- CDN Based Version - You can include the W3.CSS file into your HTML code directly from the Content Delivery Network (CDN).
W3.CSS - Containers
HTML5 has the following container elements:
- <div> - Provides a generic container to HTML content.
- <header> - Represents the header section.
- <footer> - Represents the footer section.
W3.CSS - Code Coloring
W3.CSS provides excellent support for syntax highlighting of the following languages:
- HTML - Use classes w3-code htmlHigh on the container having HTML Code.
- CSS - Use classes w3-code cssHigh on the container having CSS Code.
- JS - Use classes w3-code jsHigh on the container having CSS Code.
W3.CSS - Cards
W3.CSS has several special classes to display containers as paper-like cards with shadow.
Class Name | Description |
---|---|
w3-card | Styles a container for any HTML content with border |
w3-card-2 | Styles a container for any HTML content with 2px bordered shadow |
w3-card-4 | Styles a container for any HTML content with 4px bordered shadow |
W3.CSS - Responsive Design
W3.CSS has several special classes to create a responsive design.
Class Name | Description |
---|---|
w3-half | Sets the container to occupy 1/2nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%. |
W3.CSS - Grids
W3.CSS provides a 12 column fluid responsive grid.
It uses the w3-row and w3-col style classes to define rows and columns respectively.
It uses the w3-row and w3-col style classes to define rows and columns respectively.
W3.CSS - Forms
W3.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:
Class Name | Description |
---|---|
w3-group | Represents a bordered container. Can be used to group a label and input. |
w3-input | Beautifies an input control. |
w3-label | Beautifies a label. |
w3-checkbox w3-checkmark | Beautify a checkbox/ radio button. |
W3.CSS - Buttons
W3.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used:
Class Name | Description |
---|---|
w3-btn | Represents a standard button. Can be used to style a link as button as well. |
w3-btn-floating | Represents a floating button being circular in design. |
w3-btn-floating-large | Represents a large floating button. |
W3.CSS - Tooltips
W3.CSS supports a different kind of tooltip using w3-tooltip class. Take a look at the following example. Here we've put a tooltiptext within a div and an image and applied w3-tooltip on the parent div.
<div class="w3-tooltip"> <div class="w3-text w3-container w3-teal" style="width:255px;"> <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p> </div> <div>
W3.CSS - Modal Dialog
W3.CSS can be used to display a customizable modal dialog box instead of the standard JavaScript alert.
It uses w3-row and w3-col style classes to define rows and columns respectively.
It uses w3-row and w3-col style classes to define rows and columns respectively.
Class Name | Description |
---|---|
modal-dialog | Represents the main parent window to define a dialog box. |
w3-modal-dialog | Represents the dialog content container. |
w3-modal-content | Represents dialog contents. |
W3.CSS - Tables
W3.CSS can be used to display different types of tables using various styles over w3-table.
Class Name | Description |
---|---|
w3-table | Represents a basic table without any border. |
w3-striped | Displays a stripped table. |
w3-bordered | Draws a table with a border across rows. |
W3.CSS - Lists
W3.CSS can be used to display different types of lists using various styles over w3-ul.
Class Name | Description |
---|---|
w3-ul | Represents a basic list without any border. |
w3-striped | Displays a stripped list. |
w3-bordered | Draws a list with border across rows. |
w3-border | Draws a list with border. |
W3.CSS - Images
W3.CSS provides options to display images in beautiful and interesting ways using w3-image as the main class.
Class Name | Description |
---|---|
w3-image | Represents a basic styled image without any border. |
w3-circle | Displays an image within a circle |
w3-title | Used to put text over an image. |
w3-card | Draws an image as a card. |
W3.CSS - Icons
W3.CSS supports the following popular icon libraries:
- Font Awesome Icons
- Google Material Icons
- Bootstrap Icons
W3.CSS - Colors
W3.CSS supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.
W3.CSS - Navigation
W3.CSS has several special classes to display a navigation bar or a menu on a website quickly.
Class Name | Description |
---|---|
w3-topnav | Styles a list as a horizontal menu/navigation bar. |
w3-sidenav | Styles a list as a vertical menu/navigation bar. |
W3.CSS - Utilities
W3.CSS has several utility classes which are very useful for day-to-day designing needs.
- Color utility classes - Examples: w3-red, w3-yellow
- Padding utility classes - Examples: w3-padding-jumbo, w3-padding-16
- Margin utility classes - Examples: w3-margin-8, w3-margin-64
W3.CSS - Quick Guide
W3.CSS - Overview
What is W3.CSS?
W3.CSS is a Cascading style sheet, CSS developed by w3schools.com. It helps in creating faster, beautiful and responsive websites. It is inspired from Google Material Design.Following are its some of the salient features:
W3.CSS - Useful Resources
If you want to list down your website, book or any other resource on
this page then please contact at webmaster@tutorialspoint.com
Websites on W3.CSS
- W3.CSS - W3.CSS official home page
Discuss W3.CSS
W3.CSS is a Cascading Style Sheet (CSS) developed by w3schools.com.
It helps in creating faster, beautiful, and responsive websites. It is
inspired from Google Material Design.
TypeScript - Classes
TypeScript is object oriented JavaScript. TypeScript supports object-oriented programming features like classes, interfaces, etc. A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object. Typescript gives built in support for this concept called class. JavaScript ES5 or earlier didn’t support classes. Typescript gets this feature from ES6.
Subscribe to:
Posts (Atom)