Iconfont-阿里巴巴矢量图标库
生活随笔
收集整理的這篇文章主要介紹了
Iconfont-阿里巴巴矢量图标库
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、可以對單個圖標(biāo)下載,下載PNG圖片應(yīng)用到項目中去。
2、將需要的圖標(biāo)添加到購物車中,然后下載生成的代碼,應(yīng)用到項目中去。
? ? ? 好處是可以調(diào)整圖標(biāo)的大小以及顏色,很方便。
?
?
效果圖:
?
?使用步驟
使用步驟如下:第一步:引入項目下面生成的 fontclass 代碼: <link rel="stylesheet" href="./iconfont.css"> 第二步:挑選相應(yīng)圖標(biāo)并獲取類名,應(yīng)用于頁面: <span class="iconfont icon-xxx"></span>?HTML代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/iconfont.css"></head><body><span class="iconfont icon-yuyin"></span><span class="iconfont icon-jiantou-copy"></span></body> </html>?CSS文件
@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1564368657528'); /* IE9 */src: url('iconfont.eot?t=1564368657528#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN8AAsAAAAAB1gAAAMtAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCOII0ATYCJAMMCwgABCAFhG0HPhuCBiMRVoM02X8q7pio5p1QpsGMEz3KPMAah8zamYADElyh4PEOCK6Fr03YHx2CPeYy5kxXX75SpmBG1uuF4InmPt/sbHKI7ABAnboCkWp9ZVnIagLFkkH9dAEPF6AGkLEgvTXniNyEiZorytoBKralfMv5S9OBl9PJxX0LAoCMmkcpnQONClW4FHlqZ3wKUNZXCrXZbU9OqzJT3FIiKIUmS01IpmvUAUzJ5ZD5P5fTW4nPb1kucw086mVpHFBAY22KrEAC8hbZRexPXOZxCBBIqmLSvbvcO/5YYJwAspElQcc/o8fWlAr+CC6yVP9XgL85Ze7DheD78kn5g8FRYOrg+jbutL9tSfcmD0EwnhWQVoECxcCCzKP2STSKF1MCDak1a8HFIpixQp5HwDeV7kr/eAbEBYqDAchnZeakBA4LAu9oBQYABcBlkkvABZYSvaPgZMaHhsaGBO5ZH6ej4w5eORP34lGvJfXHLk49tDImeC/fm2il2kgxN+eFWcGD89qZK7q089KYSt+4KqL3wEHTiqAzoymv+N8hPj7xzfs9r/gyFtO5zZftIt7dQN3n9Bm17K3qSowoSHVpGhgyDn7Gc/wmBrfFXz09vmWmZIaZXdcvHzKE41nNrrCcJVQv4T3WHmcXVCVXccsqGz41fiN+eb8gfGCkFnuBd93e75f8hvx5LoS5PywAz+ODEYHXu6WdE/xP2CHwAwQt66wpgny1gL7HBXJKGcC5PS2BJAQecEd6018Z07oYBH9iEjD4kQKKP9mopRSDQxDV4OJPGwRSpG91EFE2UcQGAIWOMSCEuwWGUG6DEu4BaimvwSHWF3AJTyGQB8+WW86tymZrxkAwhvAHWUS1oiaZhaVXTNoy4LQooD6RmywEjmnnU3uskceY0bwTV0SBYqpgx5yGZUmgmXKMxExFtGdZCnuTGVHVmVljKCBQDIR+QCZCasprLWaFz1+hRKsU4BpSg/0JsUbWOXCY7BboXl63Il3LK423hEsIBSiMVMCOsaKSxAnQ+KAcighT2iOqeSyukWorN+dXVs+3jU5nBu7rZ0TFsrgsqIVaIyL9G/7aX1Z3OgAAAA==') format('woff2'),url('iconfont.woff?t=1564368657528') format('woff'),url('iconfont.ttf?t=1564368657528') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1564368657528#iconfont') format('svg'); /* iOS 4.1- */ }.iconfont {font-family: "iconfont" !important;font-size: 300px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-jiantou-copy:before {content: "\e632";color: green; }.icon-yuyin:before {content: "\e76f";color: orange; }然后去調(diào)整css樣式即可。
總結(jié)
以上是生活随笔為你收集整理的Iconfont-阿里巴巴矢量图标库的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html5 查看图片,html5实现图片
- 下一篇: 计算机组装与维修预习,《计算机组装与维修