Find out everything about icons and Links in CSS

CSS

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> 

Copy and run the code

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> 

Copyand run the code

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 link
  • a:visited – the link the user has visited
  • a:hover – a link when the user mouse over it
  • a: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!

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *