FontAwesome图标字体库和CSS框架
生活随笔
收集整理的這篇文章主要介紹了
FontAwesome图标字体库和CSS框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、CSS框架簡介
Font Awesome是一套絕佳的圖標字體庫和CSS框架,為您提供可縮放的矢量圖標,您可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。僅一個Font Awesome字庫,就幾乎包含了與網頁相關的形象圖標。Font Awesome完全不依賴JavaScript,因此無需擔心兼容性。
框架創始人:戴夫·甘迪(Dave Gandy)
中文網站:https://fontawesome.dashgame.com/
2、使用方法
(1)下載CSS框架
從上述網站中下載CSS框架,并添加到項目中。
(2)樣式引用
在HTML頁面中引用樣式。如下:
<!--FontAwesome圖標字體樣式庫--> <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">(3)添加圖標
在頁面中使用字體圖標。如下:
<i class="fa fa-shopping-cart"></i> 我的購物車【示例】使用FontAwesome圖標字體庫生成網頁所需的相關圖片。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>FontAwesome圖標字體庫</title><meta name="author" content="pan_junbiao的博客"><!--FontAwesome圖標字體樣式庫--><link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css"><style>table { border-collapse: collapse;}table,table tr th, table tr td { border:1px solid #000000; padding: 5px 10px;}</style> </head> <body><table align="center"><tr><th>CSS框架:</th><td>FontAwesome圖標字體庫</td></tr><tr><th>框架創始人:</th><td>戴夫·甘迪(Dave Gandy)</td></tr><tr><th>字體圖標:</th><td><i class="fa fa-shopping-cart"></i> fa-shopping-cart<br/><i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up<br/><i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down<br/><i class="fa fa-bell-o"></i> fa-bell-o<br/><i class="fa fa-commenting-o"></i> fa-commenting-o<br/><i class="fa fa-folder-open"></i> fa-folder-open<br/><i class="fa fa-gamepad"></i> fa-gamepad<br/><i class="fa fa-id-card-o"></i> fa-id-card-o<br/></td></tr><tr><th>博客信息:</th><td>您好,歡迎訪問 pan_junbiao的博客</td></tr><tr><th>博客地址:</th><td>https://blog.csdn.net/pan_junbiao</td></tr></table> </body> </html>執行結果:
?
總結
以上是生活随笔為你收集整理的FontAwesome图标字体库和CSS框架的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 上海康桥先进制造技术创业园项目远程预付费
- 下一篇: 纽约大学计算机与科学,纽约大学计算机科学