整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
應用界面中圖標的存在，會給用戶一個良好第一印象，這個挺重要的。但是從零開始開發圖標需要大量的時間和金錢。在你的網站上使用圖標可以讓你有效地與你的訪問者交流:它們增加了可讀性，突出了重要的內容，加強了功能或特性，增強了設計。因此，使用現成圖標是很好的一個選擇。
這里阿里的iconfont就不做介紹的，國內的開發者基本都知道，也都在用，現在我們來看看國外有哪些好用的圖標庫。
網址：https://www.flaticon.com/packs格式和類型：PNG, SVG, EPS, PSD, and BASE 64, Marketplace價格和許可證：有限的免費套餐和高級套餐，每月9.99美元起
Flaticon 包含完全可編輯的矢量，可用于個人和商業項目。FlatIcon 擁有超過230萬個向量圖標，它們被分組到51202個包中
該產品有 Adobe 擴展，允許我們輕松導入Photoshop, Illustrator和After Effects中的圖標。如果希望使用web字體而不是靜態文件來顯示圖標，那么FlatIcon 將負責格式轉換并生成一個可以使用的 web 字體。我們還可以自定義下載的圖標。
亮點：
網址：https://jam-icons.com/格式和類型：SVG, CSS價格和許可證：Free, MIT
Jam 圖標是一套896個手工制作的圖標。這個圖標包提供了SVG和字體版本。這些圖標可以用作web、打印或應用程序開發項目中的SVG文件。這些圖標也可以用作給定CSS樣式表的字體。有16px、24px和32px三種尺寸。我們還可以選擇填充或描邊圖標。
網址：https://fontisto.com/格式和類型：CSS價格和許可證：ree, MIT
Fontisto 是矢量圖標包。可以立即自定義圖標：大小，顏色，陰影以及 CSS 可以完成的所有操作。該產品不需要 Javascript。Fontisto 圖標是矢量，這意味著它們在高分辨率顯示器上看起來會很好。
在該網站上，我們可以找到有關如何啟動和自定義產品的完整文檔和各種指南。我們只需將鏈接粘貼到網站上即可開始使用該產品。此外，還可以將 Fontisto 與適合的軟件包管理器一起使用：npm，yarn，bower等。
網址：https://iconmonstr.com/格式和類型：SVG, EPS, PSD and PNG, Marketplace價格和許可證：Free
Iconmonstr 的圖標集合中有4400多個圖標。每個圖標集都提供圖形的輪廓和填充版本，以確保它們可用于各種設計應用程序。該網站上的每個圖標都是免費提供的，并且圖標文件采用SVG，AI，PSD和PNG等格式，這些文件可用于免費和商業目的。
Iconmonstr通過其強大的搜索功能使搜索圖標變得簡單。我們還可以將自己喜歡的圖標保存在個人收藏夾中，以備將來使用。
亮點：
網址：https://icons.pixsellz.io/格式和類型：SVG, EPS, PSD, PNG, FIG, Material design價格和許可證：Free，Apache License Version 2.0
大量的1000多個圖標分為16個不同類別。免費的圖標包靈感來自Material設計，并以三種不同的視覺風格呈現-圓形，輪廓和兩色。該套件有請輸入代碼6種不同的文件格式，因此我們可以使用首選設計軟件中的圖標。
亮點：
網址：http://www.entypo.com/格式和類型：SVG價格和許可證：Free, Creative Common License 4.0
Entypo是 svg 圖標系列產品，幾年前由瑞典的 Daniel Bruce 精心制作而成。這些圖標非常棒：在贈品方面，它們是最重要的。該產品以 SVG 形式提供，帶有411個圖標，免費提供知識共享許可。
網址：https://evil-icons.io/格式和類型：SVG, Sketch價格和許可證：Free, MIT
這個庫很大包含所有內容-包括SVG和原始源文件。這意味著我們可以下載SVG以及Illustrator文件和Sketch的.sketch文件。
網址：https://streamlineicons.com/格式和類型：ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG價格和許可證：免費到
Streamline Icons是一個兼容性強的免費圖標庫存。該庫按｀53｀個類別進行組織，帶有30000多個矢量圖標。
這是為 Sketch 優化的少數幾個圖標包之一，可輕松操縱筆觸寬度和顏色。諸如symbols 和共享樣式之類的內置 Sketch 功能使重復使用元素（如圖標）變得快速，容易。
該公司擁有自己的 Web 應用程序，可幫助直接從瀏覽器瀏覽，搜索和下載圖標。
亮點：
網址：https://smashicons.com/格式和類型：JAR, SVG, AI, SKETCH, Marketplace價格和許可證：免費到 9
網址：https://smashicons.com/格式和類型：JAR,SVG,AI,SKETCH,Marketplace價格和許可證：免費到 149
Smashicons 在其庫中提供了超過219000+個圖標的全面圖標集合。Smashicons 的工作方式與其他產品略有不同：其定價基于每月5美元的月度計劃。這意味著您每月只需支付5美元，就可以訪問他們現有圖標的整個集合以及他們發布的任何將來的圖標。
亮點：
網址：https://icons8.com/格式和類型：SVG, PNG, PDF價格和許可證：Good Boy License, 免費到
Icons8 中的圖標集帶有超過120000個圖標，涵蓋多個類別。從企業和辦公室設置到人，食物和社交媒體圖標。這些圖標旨在模仿特定操作系統的外觀。我們可以在Windows，iOS 和 Android 版本中下載它們。
亮點：
網址：https://icomoon.io/格式和類型：SVG, PNG, PDF價格和許可證：免費到 9.90
Icomoon 是用于圖像和圖標管理的完整工具。該產品具有用于編輯和管理圖標的高質量解決方案。Icomoon 圖標是在16X16網格上手工制作的，并提供SVG，EPS，PSD，PDF和AI格式。圖標集也由其創建者不斷更新。
每個圖標包都有詳細的授權許可，這樣設計人員和開發人員就可以確切地知道如何使用圖標。用戶還可以定制自己的圖標字體。
亮點：
網址：http://www.glyphish.com/格式和類型：SVG, PNG, PDF, PSD, Glyph, Icon font價格和許可證：Creative Common Attribution， 從25美元到99美元
Glyphish提供了各種不同的圖標庫。每個庫都有各種不同的格式，包括PNG，SVG，PSD和AI。基本圖標的價格為25美元，而最終的圖標包的正常價格為99美元。免費演示包含50個圖標。設計人員可以輕松編輯所有圖標。
亮點：
網址：https://ionicons.com/格式和類型：SVG and Webfont, Icon font價格和許可證：MIT
Ionic 小組決定以稱為Ionicons的網絡字體的形式發布其圖標。自然，它們是完全免費的，并且可以在GitHub上使用。我們甚至可以使用CDN版本的樣式表將這些圖標直接添加到的站點中，它也支持 SVG 和 Web 字體。
亮點：
網址：https://material.io/resources/icons/?style=baseline格式和類型：SVG, Webfont, Material design價格和許可證：Free, Apache License 2.0
Material Icon 是Google提供的免費圖標庫。為了確保可讀性和清晰度，這些圖標已進行了優化，以在所有平臺和顯示器上看起來都很好。這些圖標是完全免費的，可以在GitHub上訪問。這個圖標庫很大，有超過1,000個圖標涵蓋了廣泛的界面功能。
網址：https://linearicons.com/格式和類型：SVG, Webfont, Icon font價格和許可證：免費到59美元，Common Creative License
Linearicons是用于個人或商業目的的最受歡迎和最佳圖標包之一。Linearicons 有免費和高級版本，此驚人的圖標包的免費版本已獲得Creative Common許可。我們還可以根據需要選擇其他軟件包，例如“桌面軟件包”。
亮點：
網址：https://feathericons.com/格式和類型：SVG, Webfont, Iconfont價格和許可證：Free, MIT License
Feather是最受歡迎的開源圖標集之一。這些是在24X24網格上設計的開源圖標。這些圖標以SVG格式提供。它已獲得MIT許可，并且在開源中大約有250多個圖標。
這些圖標很容易編輯，無論大小都很清晰。它們首先被設計成一種圖標字體，所以它是作為一種web字體嵌入的。
網址https://www.iconfinder.com/格式和類型：SVG, PNG, ICO, Marketplace價格和許可證：每月9美元至49美元
Iconfinder是網絡上最受歡迎的圖標資源之一。它提供了超過400萬個圖標，為用戶提供了各種搜索選項，包括圖標格式，價格，大小，背景等。還有多個月度付款計劃-從到。我們也可以選擇“隨用隨付”系統。
圖標文件提供SVG，PNG，ICO，ICNS和Adobe Illustrator格式，尺寸范圍為16×16到512×512。如果找不到自己喜歡的東西，或者只是想要專門為我們品牌設計的自定義圖標，也可以與網站上的一些最佳設計師合作。
亮點：
網址：https://thenounproject.com/格式和類型：SVG, PNG, Marketplace價格和許可證：Creative Commons License
Noun Project 提供了網絡上最大的圖標庫之一。該網站的大多數圖標都以SVG和PNG格式以及黑白樣式提供。
該網站的庫由各種獨立設計師設計的圖標文件組成。在這里，創作者和創意專業人士可以合作銷售他們的設計，并找到看似無窮無盡的高級圖標庫。
搜索這個龐大而全面的圖標庫非常容易。該圖標庫的其他主要功能包括免費和高級下載選項，許多大型圖標集，適用于Mac的應用程序等等。該圖標庫會定期更新，并且每天都會發布新的圖標合集。
亮點：
網址：https://fontawesome.com/icons格式和類型：SVG, PNG, Icon font, Marketplace價格和許可證：SIL OFL 1.1
Font Awesome是周圍使用最廣泛，最受歡迎的圖標字體。這也是在引導時為團隊設置的默認圖標。它還可以作為SVG圖標以及其他格式使用。該許可證對任何商業或個人用途都是免費的。
每個圖標都是完全可伸縮的，并且可以直接在CSS中維護。我們可以使用純CSS3更改顏色，陰影，背景漸變以及幾乎所有其他內容。使用此庫的另一個原因是，它已完全優化，并且完全不需要JavaScript，因此沒有兼容性問題。
亮點：
網址：https://lineicons.com/格式和類型：SVG, Web font, Icon fontace價格和許可證：免費
LineIcons 還提供帶有清晰文檔的免費CDN，使其易于入門。
該圖標包是完全免費的，并帶有450多個線型圖標。它涵蓋了來自不同類別的項目所需的每個基本圖標。LineIcons 還提供免費的CDN和清晰的文檔，以輕松上手。它帶有2個不同的可伸縮軟件包–可以根據項目需要使用WebFonts和SVG文件。
亮點：
選擇圖標庫時不應該是基于圖標庫受歡迎的程度，而是哪個圖標庫更適合當前的開發項目，哪個圖標庫的風格更符合我們應用程序的風格。
希望本文有助于選擇最適合你需要的解決方案。
作者：Eugene Stepnov 譯者：前端小智 來源：flatlogic
來源：https://blog/top-icons-packs-and-resources-for-web/
HTML+CSS3+JS創意設計——打造炫酷滑動登錄頁面
**引言：探索交互之美**
在Web開發的世界里，優秀的用戶體驗往往始于一個精心設計的登錄界面。HTML5、CSS3以及JavaScript的結合讓我們能夠創造出極具創意與個性化的滑動登錄頁面，讓用戶在首次接觸應用時就能留下深刻印象。本篇文章將詳細介紹如何利用基礎的HTML+CSS3+JS技術，從零開始打造一款令人眼前一亮的滑動登錄頁面，并通過詳細的代碼實例解析，帶領您領略前端交互設計的魅力。
---
### **一、搭建基礎HTML結構**
**標題：** 構建骨骼——登錄表單的基礎布局
首先，我們需要構建一個簡潔明了的HTML結構，包括用戶名輸入框、密碼輸入框、登錄按鈕以及可選的注冊鏈接。為了實現滑動效果，我們還將引入一個容器元素來包裹整個登錄區域。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>滑動登錄頁面</title>
<!-- 引入外部CSS和JS文件 -->
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
<body>
<div id="login-slider">
<form action="#" class="login-form">
<input type="text" placeholder="用戶名" required>
<input type="password" placeholder="密碼" required>
<button type="submit">登錄</button>
<a href="#">忘記密碼？</a>
<a href="#">立即注冊</a>
</form>
</div>
</body>
</html>
```
---
### **二、CSS3魔法——樣式與動畫**
**標題：** 點綴肌膚——賦予登錄表單靈動之感
接下來，我們將使用CSS3為登錄表單添加樣式，并利用`@keyframes`規則定義滑動動畫效果。同時，我們還需要保證登錄表單在不同設備上具有良好的響應式布局。
```css
/* styles.css */
body {
margin: 0;
background-color: #f0f0f0;
}
#login-slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: auto;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.login-form {
display: flex;
flex-direction: column;
padding: 20px;
animation: slideIn 1s ease-in-out forwards;
}
/* 定義滑動動畫 */
@keyframes slideIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
/* 登錄表單元素樣式 */
input[type="text"],
input[type="password"] {
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
}
button {
cursor: pointer;
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
}
/* 響應式布局 */
@media screen and (max-width: 768px) {
#login-slider {
width: 90%;
}
}
```
---
### **三、JavaScript增強交互**
**標題：** 賦予靈魂——用JavaScript實現滑動觸發與驗證邏輯
現在我們要借助JavaScript來控制登錄表單的滑動行為，例如當用戶點擊某個鏈接或者頁面加載完成后自動觸發滑動動畫。同時，可以增加一些簡單的表單驗證功能。
```javascript
// scripts.js
document.addEventListener('DOMContentLoaded', ()=> {
// 頁面加載完成后執行滑動動畫
const loginSlider=document.getElementById('login-slider');
loginSlider.classList.add('slide-active');
// 表單提交事件處理，此處僅為示例，實際場景下需加入真實驗證邏輯
const form=document.querySelector('.login-form');
form.addEventListener('submit', (event)=> {
event.preventDefault(); // 阻止默認提交行為
const username=form.querySelector('input[type="text"]').value;
const password=form.querySelector('input[type="password"]').value;
// 實現簡單驗證邏輯，如為空檢查
if (!username || !password) {
alert('用戶名和密碼不能為空!');
} else {
// 這里可以替換為真實的登錄請求邏輯
console.log('正在登錄...', username, password);
}
});
});
```
---
### **四、創意無限——拓展與優化**
**標題：** 持續創新——更多滑動登錄頁面的設計思路與實踐
除了上述基本的滑動登錄形式，還可以進一步豐富設計，比如：
- 添加進度條指示登錄滑動完成度；
- 使用CSS變量實現自定義主題切換；
- 結合SVG圖標增加視覺吸引力；
- 通過IntersectionObserver API實現視口可見時自動滑動；
- 配合AJAX技術實現實時驗證和無刷新登錄。
---
**結語：**
通過這次對HTML+CSS3+JS組合技術的探索，我們不僅成功地制作出了一個富有創意的滑動登錄頁面，還展現了前端技術在交互設計中的無限可能性。學習并靈活運用這些基礎知識，可以讓您的Web應用更加生動有趣，從而更好地吸引和留住用戶。持續關注前端技術的最新發展，不斷挑戰自我，用代碼書寫更美好的Web世界。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
CSS視頻教程第22課 帶圖標的登陸框
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
