We will encounter many beautiful icons in our daily study. Have your friends ever thought about how to do it? No, it doesn't matter. Let's study together today.
These icons are often seen on websites and landing pages.
Black and white Font Icon
1, First of all, I recommend an icon library that I personally think is easy to use: iconfont Ali icon library.
iconfont Alibaba vector icon library
2, After entering the website, we first register and log in
You can log in here using microblog 🙂
After coming in, we can slowly find the icons we like or want, (but I don't recommend this because it's more troublesome 🤭) We can directly search what we want, such as:
3, Find the icon you want and place the mouse over the icon ， Click the add stock in button
We will see this in the upper right corner (similar to Taobao shopping cart, but in different positions):
Then click the shopping cart, select Add to the item (we need to create an item ourselves when we just registered the account) and click OK,
After that, you will enter the project, as shown in the figure:
Click download to local, wait for the download to complete, and then unzip. (the unzipped file name can be changed!!!!! I change it here to iconfont)
4, Enter visual and import the folder (that is, the folder just extracted), and create a new html file (I name it icon. html here)
First, introduce the css code of the icon
<link rel="stylesheet" href="./iconfont/iconfont.css">
The icon here is the font icon!!! We can set the font size like setting the font size s:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.mao{
font-size: 80px;
}
</style>
</head>
<body>
<span class="iconfont icon-xiongmao mao"></span>
</body>
</html>be careful:
1. This is a font icon. They have a unified class name iconfont (default class name)
2. This name is the name of the icon we just downloaded. Click Copy code and paste it.
3. You can have multiple class names. I'm here mainly to set the size of font icons (you can also set the color... But we can add color to black-and-white icons. We can't make colorful icons because they are ugly and unprofessional).
The overall effect is shown in the figure:
Color font Icon
5, In daily application, we will also encounter colorful icons, such as:
However, according to the method just described, the effect is as follows:
Isn't it ugly 🙄， Don't panic. Let's solve it together. Let's look at the code first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<script src="./iconfont/iconfont.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.mao{
font-size: 80px;
}
</style>
</head>
<body>
<svg class="icon mao" aria-hidden="true">
<use xlink:href="#icon-daxiongmaoSVG "></use>
</svg>
</body>
</html>Let's analyze:
1. First, reference the css and js code of the font icon (one js is introduced more than the black-and-white Font Icon)
2. Set the style of icon class (1em is the relative length unit) vertical overflow overflow This code may not be written)
3. Set the class name (multiple class names can be set, or. mao class name can not be set here)
4. Hidden beyond domain: true
5. Be sure to bring the name of the Font Icon #!!!
Final effect:
!! The opinions in this article are based on your own understanding. There may be some mistakes in some places (if you find problems, please write to me in time and I will correct them in time). I hope you can understand. If you have different opinions, please write to me in time.