Logo

CSS Icons

CSS Icons      

CSS icons are specified like a symbol or image used inside a computer interface assign to any element. CSS icons are the graphical depiction of any program or file that supports users to recognize the file type quickly.

It is a comfortable way of inserting icons to any HTML page by using an icon library. It is feasible to format an icon library with the use of CSS. We may customize any icon based on their size, shadow, and color.

Here we are mentioning some of the essential icon libraries like Google icons, Font Awesome icons, and Bootstrap icons that may be used efficiently inside the CSS. We don’t need to download or install these icon libraries.

Description of the above libraries is as follows:

Font Awesome icons

We have to insert a link to use font awesome icons library. This link will be defined in the <head> section, which is mentioned below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    

Let’s take an example below:

Example

<!DOCTYPE html>  
<html>  
<head>  
<title> CSS Icons </title> 
<link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
<style> 
body
{ 
text-align: center; 
background-color: lime; 
} 
.fa
{ 
color: red; 
font-size: 50px; 
margin: 10px; 
} 
</style> 
</head>  
<body style="text-align: center">  
<h1>Font Awesome Library</h1> 
      <i class= "fa fa-cloud"></i>  
      <i class= "fa fa-file"></i>  
      <i class= "fa fa-heart"></i>  
      <i class= "fa fa-bars"></i>  
      <i class= "fa fa-car"</i>  
</body>  
</html>   

Output:

CSS Icons

Bootstrap icons

Similarly, we have to insert a link inside the HTML page to use this icons library. This link will be defined in the <head> section which is mentioned below:

Example

<!DOCTYPE html>  
<html>  
<head>  
<title> CSS Icons </title> 
<link rel= "stylesheet"  
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<style> 
body
{ 
text-align: center; 
background-color: lime; 
} 
.glyphicon
{ 
color: red; 
font-size: 50px; 
margin: 10px; 
} 
</style> 
</head>  
<body style="text-align: center">  
<h1> Bootstrap icons </h1> 
      <i class= "glyphicon glyphicon-cloud"></i>  
      <i class= "glyphicon glyphicon-file"></i>  
      <i class= "glyphicon glyphicon-heart"></i>  
      <i class= "glyphicon glyphicon-user"></i>  
      <i class= "glyphicon glyphicon-thumbs-up"></i>  
      <i class= "glyphicon glyphicon-remove"></i> 
      <i class= "glyphicon glyphicon-envelope"></i>     
</body>  
</html>   

Output:

CSS Icons

Google icons

Same as the above mentioned libraries, we have to insert a link inside the HTML page to use this icon library. This link will be defined in the <head> section which is mentioned below:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 

Example

<!DOCTYPE html>  
<html>  
<head>  
<title> CSS Icons </title> 
<link rel= "stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
<style> 
body
{ 
text-align: center; 
background-color: lime; 
} 
.material-icons
{ 
color: red; 
font-size: 50px; 
margin: 10px; 
} 
</style> 
</head>  
<body style="text-align: center">  
<h1> Google icons </h1> 
      <i class= "material-icons"> cloud </i>  
      <i class= "material-icons"> attachment </i>  
      <i class= "material-icons"> computer </i>  
      <i class= "material-icons"> favorite </i>  
      <i class= "material-icons"> traffic </i>    
</body>  
</html>   

Output:

CSS Icons

Related Topics

Laravel Forms

CSRF Field For defining an HTML form in our application, we should include a hidden CSRF token field in the form, so that the CSRF protection middleware can validate the request. We use the...

3 minutes read.

Laravel Control Statements

Blade also provides convenient shortcuts for common control structure in PHP, such as conditional statements and loops. These shortcuts provide a very clean working with PHP structures, while also remain familiar to...

3 minutes read.

Laravel Basic Controllers

Controllers group relate request handling logic into a single class. They are stored in the app/Http/Controllers directory. Basic Controllers Defining Controllers: The controllers extend the base controller class included with Laravel. The base class...

2 minutes read.

Laravel Route Parameters

Required Parameters: We need to capture segments of the URI within our route. We are going to see how to pass parameters through two or many views inside the closure function. Route::get('/home',...

2 minutes read.

Laravel Advantages

Top 8 Advantages of Laravel The following advantages that Laravel offers, it is based upon designing a web application:- 1. Powerful Authentication: The Laravel PHP framework was developed with a purpose that can help...

2 minutes read.

Laravel Validation

Laravel provides a different way to validate the application`s incoming data. Laravel base controller class uses a ValidatesRequests that provides an easy method to validate incoming HTTP request with many powerful validation rules. Defining the...

5 minutes read.

Creating First Laravel Project

Creating the Laravel Project For creating the Laravel project, we are going to use a “Git”. If you don`t have a “Git” software and also don`t have the knowledge to install it, then click here. Let`s...

1 minute read.

Database Migrations

Database Migrations in Laravel Introduction Migrations are version control for our database. It allows our team to modify and share the application`s database. Migrations are paired with schema builder to build an application`s database...

2 minutes read.

Laravel Tutorial

Laravel Tutorial is a PHP based web-framework; it is used for developing high-end web applications by using significant syntax's. It has a substantial collection of tools and provides application architecture....

5 minutes read.

Features of Laravel Framework

Top 8 Laravel Features Laravel has a very rich set of features that makes the speed of web development faster. The following features that serve the Laravel`s key points: Bundles: Bundles provide us a Modular Packaging...

2 minutes read.

Laravel Data Views

Passing the Data Views The data should be an array with the key/value pairs while passing the information in the following (return view(‘greeting’, [‘name’ => ‘John’]);) manner. Inside the view, we...

4 minutes read.

Laravel Creating Views

Creating Views Views hold the HTML served by our application, and it separates our controller/application logic with the help of presentation logic. Views are stored inside the resources/views directory. A simple view...

2 minutes read.

Laravel Basic Routing

Basic Routing The basic Laravel routes accept a URI and a Closure, providing a straightforward method for defining routes: Route::get('/', function () { return view('welcome') }); E.g.: Route::get('/', function () { return "Hello Laravel"; }); Output: We...

3 minutes read.

Laravel vs Other Frameworks

Laravel is one of the top listing PHP framework. Some of the reasons which make Laravel top listing PHP framework that are as follows: Authorization Technique.Object-Oriented Libraries.Artisan.MVC Support.Security.Database Migration.Database Template Engine. In this Pie Chart distribution, we...

6 minutes read.

Laravel Resource Controllers

Laravel resource routing assigns the “CRUD” routes to a controller with the help of single line code. For E.g., If we wish to create a controller that handles all HTTP requests “photos” stored by...

4 minutes read.

How to Install Git on Windows

Git Installation Git is a distributed version control system. It is used for tracking changes in source code during development. The goals include speed, data integrity, non-linear workflows, etc. Git was developed in 2005. It is free...

3 minutes read.

Laravel Authentication

Authentication is a process of identifying user credentials. Laravel makes implementing authentication very simple. The authentication configuration file is located at config/auth.php that contains various documented options for adjusting the behavior of the authentication...

4 minutes read.

Laravel Uploading Files

Retrieving Uploaded Files We can access files from an Illuminate\Http\Request. By using the file method or using the dynamic properties. The file method returns an instance of the Illuminate\Http\UploadedFile class that extends the...

2 minutes read.

CSS Icons

CSS Icons       CSS icons are specified like a symbol or image used inside a computer interface assign to any element. CSS icons are the graphical depiction of any program or...

4 minutes read.

Laravel Templating Inheritance

Introduction: The Blade is a PHP Templating Engine. It grabs the PHP code and makes it easy for us to implement in HTML. The Blade is a simple, and powerful Templating Engine provided by...

4 minutes read.