Iconfont-阿里巴巴矢量图标库

本是古典何须时尚 2021-11-16 19:52 589阅读 0赞

# 1、可以对单个图标下载，下载PNG图片应用到项目中去。 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70][]

# 2、将需要的图标添加到购物车中，然后下载生成的代码，应用到项目中去。 #

好处是可以调整图标的大小以及颜色，很方便。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70 2][]

# 效果图： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70 3][]

#  使用步骤 #

使用步骤如下：
 
 第一步：引入项目下面生成的 fontclass 代码：
 <link rel="stylesheet" href="./iconfont.css">
 第二步：挑选相应图标并获取类名，应用于页面：

#  HTML代码 #

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<title></title>
 		<link rel="stylesheet" href="css/iconfont.css">
 	</head>
 	<body>
 		
 		
 	</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;
    }

然后去调整css样式即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70]: /images/20211116/7d4008ca71d84748973a56ee5efeed36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70 1]: /images/20211116/05e1c618d53e48d6aa50be44bec74aaa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70 2]: /images/20211116/93f1e1f7a3be42e58048b545e0074666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70 3]: /images/20211116/7d5bdd64c29f4d24a5c931f55933954b.png