Table of Contents
Preface
This article will share icons and links for ace in CSS through examples and detailed practice in this article.
1. ICON in CSS
1.1. How to add icons
The easiest way to add icons to your HTML page is to use an icon library, such as Font Awesome.
Adds the name of the specified icon class to any inline HTML elements (eg <i> or <span>).
All the icons in the icon library below, are extensible vectors and can be customized with CSS (size, color, shadow, etc.)
1.2. Font Awesome Icons
To use Font Awesome icons visit fontawesome.com, login and get the code to add it to the section <head> of your HTML page:
<script src="https://kit.fontawesome.com/yourcode.js"></script>Note: No download or installation required!
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html> 1.3 Bootstrap Icons
To use Bootstrap glyphicons add the following in the section <head> of your HTML page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Note: No download or installation required!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html> 1.4 Google Icons
To use Google icons, add the following line inside the section <head> of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">Note: No download or installation required!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html> 2. Links in CSS
2.1. Links with style
Links can be styled with any CSS property (for example: color, font-family, background, etc.).
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="https://cafedev.vn/tu-hoc-css-tim-hieu-moi-thu-ve-iconsbieu-tuong-va-linkslien-ket-trong-css/default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>Additionally, links may be styled differently depending on their state.
The four link states are:
a:link– a normal, unreachable linka:visited– the link the user has visiteda:hover– a link when the user mouse over ita:active– a link at the time it is clicked
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
} When styling some association states, there are several ordering rules:
- a: hover MUST come after a: link and a: visited
- a: active MUST come after a: hover
2.2. Text Decoration
The text-decoration property is mainly used to remove the underline from links:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="https://cafedev.vn/tu-hoc-css-tim-hieu-moi-thu-ve-iconsbieu-tuong-va-linkslien-ket-trong-css/default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
2.3 Background Color
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="https://cafedev.vn/tu-hoc-css-tim-hieu-moi-thu-ve-iconsbieu-tuong-va-linkslien-ket-trong-css/default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>2.4. Link Buttons
This example illustrates a more advanced example in which we combine several CSS properties to display the links as boxes / buttons:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="https://cafedev.vn/tu-hoc-css-tim-hieu-moi-thu-ve-iconsbieu-tuong-va-linkslien-ket-trong-css/default.asp" target="_blank">This is a link</a>
</body>
</html>
Full series self-learning CSS from basic to advanced.
Hope this helps!
