When writing front-end pages, we often use some pictures like small icons. If you use the picture, the code is more troublesome. Recently, I found a convenient and practical method, just use it directly.1. Introduce picture operation methods
First, we enter the URL: https://www.iconfont.cn/
If you can’t remember this website, you can search on Baidu: Alibaba vectors, and this website will appear;
Here are two more commonly used and convenient methods.
Method 1: font-class referenceStep 1: Enter the website and we can see a search box, directly enter the icon name you want, or you can find it in the icon library.
Step 2: Then add to the shopping cart.
Step 3: Click on the shopping cart to create a new project and confirm that if you want to add an image to the same project, you don’t need to recreate it again.
Step 4: Next, the following page will appear, copy the code and reference the code document.
<link rel=stylesheet href=http://at.alicdn.com/t/font_1587841_2580lrwj551.js>
Step 5: When introducing the code, remember to add http:
Step 6: Select the corresponding icon and get the class name to copy and paste, use no-referrer src=/img/bVbB5hz/view src=https://cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg title=image.jpg>
<body><i class/=iconfont icon-xxx></i></body>Method 2: symbol reference
Step 1: If a project wants to use multiple icons, you can also select the icons you want to use and add them to the shopping cart, then click Update code, and then update the code reference connection. This method needs to be downloaded locally.
Step 2: After downloading, you can see some files in the folder and introduce js files on the code page.
<link rel=stylesheet href=http://at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src=iconfont.js></script>
Step 3: Put the file package in the same directory, so that the reference to the icon can take effect.
Step 4: To the same method, we need to refer to the image name below the icon, and copy and paste the image name in svg, and replace href=change name.
<svg class=icon aria-hidden=true> <use xlink:href=#icon-079aiqing></use> </svg>
Step 5: In addition to introducing the above two file addresses on the code page, we also need to introduce a piece of style code.
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>The following are all the codes for reference
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>Alibaba vector </title> <link rel=stylesheet href=http://at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src=iconfont.js></script></head><style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style><body> <input type=text placeholder=search> <svg class=icon aria-hidden=true> <use xlink:href=#icon-079aiqing></use> </svg></body></html>Code effect:
Summarize:The first method can be used directly by introducing it, which is fast and convenient, and does not require downloading, which is more convenient to use. The disadvantages can only be used alone and does not support color.
The second method supports multi-color and multiple pictures, and the effect of introducing multiple pictures will be better. The disadvantages need to be downloaded to the local file package and must be placed in the same directory before use.
Overall, Alibaba vector graphics are very helpful to front-end developers and are free to use. You can use the above methods according to your needs.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.