FreeCodeCamp - BootStrap Icons

本文介绍如何使用FontAwesome图标库为Web应用程序添加图标。通过简单的HTML代码示例,展示了如何添加不同类型的图标,如点赞按钮和提交按钮上的纸飞机图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements. You can add Font Awesome to any app just by including it by adding the following code to the top of your HTML:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> In this case, we've already added it for you to this page behind the scenes.

The i element was originally used to make other elements italic, but is now commonly used for icons. You add the Font Awesome classes to the i element to turn it into an icon, for example:

<i class="fa fa-info-circle"></i>

Use Font Awesome to add a thumbs-up icon to your like button by giving it an i element with the classes fa and fa-thumbs-up. fa-circle fa-trash are the same.

 <i class="fa fa-thumbs-up"></i>
 <i class="fa fa-circle"></i>
 <i class="fa fa-trash"></i>

You can add the fa-paper-plane Font Awesome icon by adding <i class="fa fa-paper-plane"></i> within your submit button element.

<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>

Give your form's text input field a class of form-control

<input class="form-control" type="text" placeholder="cat photo URL" required>

转载于:https://my.oschina.net/u/1273644/blog/857184

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值