整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
00多個時尚漂亮的 css 圖標庫，特別適合 UI 設計師和前端開發者下載使用。
css.gg 是一套純 css 實現的輕量美觀的開源圖標庫，特點是所有的圖形都通過 css 語法實現，是技術和設計的完美結合。
css.gg 網站首頁
圖標在工作中應用非常廣泛，漂亮的圖標不僅在互聯網產品中隨處可見，在 PPT 、數據圖表和海報設計等各種可視化信息載體中也經常出現。
css.gg 圖標預覽
和大多數圖標庫的原始圖形格式不一樣，css.gg 是一個代碼實現的圖標庫，無論是導出的 svg、xd 格式、直接導入 figma，還是前端開發的引用，都為設計和開發帶來了便利。因此很適合用于互聯網項目。特別是在一些較輕的 web 項目上，不需要再引入字體文件或 svg 圖形的方式加載圖標，只需要拷貝相應的圖標代碼，不僅在前端開發中很方便地調整顏色，而且能用 css 代碼局部調整顏色，從而讓圖標變成彩色。
需要注意的是，圖標使用了不少 css3 規范的渲染，需要考慮瀏覽器的兼容，如果不是運行移動端或現代瀏覽器上的項目，可能會有兼容性的問題。
css.gg 基于 MIT 開源協議在 github 上開源，任何個人和商業機構都可以免費下載使用。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點【了解更多】查看本次分享的網址。
可以看作一種特殊字體，其展示的是圖標，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標加載快、不變形。也可以看作是矢量格式的圖標。
（1）iconmoon字體圖標庫：https://icomoon.io/app
（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/
（3）font-awesome字體圖標庫：
以iconmoon為例
（1）選擇需要的圖標并下載
1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同
a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。
b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。
c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。
d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。
其他字體
e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字體嵌入到TrueType中。
2）字體轉換
https://www.fontke.com/tool/convfont/
（2）字體圖標的引入
1）把字體放到項目的相應位置
將下載解壓后的fonts文件夾放到項目路徑下
2）在html頁面中引入字體
利用CSS的@font-face屬性，引入外部字體；
在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。
在html的style標簽中引入如下代碼：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8l3wc0');
src: url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
url('fonts/icomoon.woff?8l3wc0') format('woff'),
url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}3）為元素用該字體
span {
font-family: "icomoon";
}4）為元素添加內容
復制demo.html中需要的圖標，如下，將其作為元素的內容。
<span>?</span> （3）新增字體圖標的引入
當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。
titanic是在Github上開源的一組免費的動畫圖標，可以將其簡單的運用到網頁中，而且代碼及其簡單，但是動畫效果卻很不錯，動畫圖標和靜態圖標的不同之處在于它可以讓你的網頁更加富有活力，讓產品更加具備視覺吸引力，一起來看看！
https://github.com/icons8/titanic
安裝使用及其簡單，可以通過CDN或npm安裝它：
npm install titanic-icons --save
將代碼引入你網頁的head中后：
<script src="/dist/js/titanic.min.js"></script> <script src="/bodymovin/4.5.9/bodymovin.min.js"></script>
在body中初始化：
<script> var titanic = new Titanic(); </script>
這樣，你就可以在HTML中使用任意位置以下標簽添加圖標：
<div class='titanic titanic-chat'></div>
chat可以是以下任一一種：
1、titanic.isInitialized（）
判斷是否初始化成功
2、titanic.items
獲取titanic集合
3、titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()
按索引播放titanic的動畫
4、titanic.on(token), titanic.off(token), titanic.play(token)
通過名稱播放泰坦尼克號物品的動畫
5、以下是一個完成的示例：
<head>
<!--Inserting the scripts once for the whole page-->
<script src="/dist/js/titanic.min.js"></script>
<script src="/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
<!--Inserting an icon-->
<div class='titanic titanic-checkbox'></div>
<!--Initializing-->
<script>
var titanic = new Titanic({
hover: true, // auto animated on hover (default true)
click: true // auto animated on click/tap (default false)
});
</script>
<!--Clicking turns this icon on-->
<button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>
通過截圖大致了解，可以直接訪問官方網站查看動畫效果：
每個人都喜歡個性鮮明的頁面。通過200個動畫圖標包，使Web和移動用戶界面更具視覺吸引力。
titanic是一組豐富的動畫圖標，可以讓你的網頁極具視覺吸引力，是設計師和前端工程師的不二之選，感興趣的可以嘗試！
PS:你可以直接從官網或者Github獲取，當然也可以私信本頭條號關鍵字：“icons”，Enjoy it!
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
