Glyphicons 字体图标
所有可用的图标
包括250多个来自 Glyphicon Halflings 的字体图标。 Halflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。为了表示感谢,希望你在使用时尽量为 添加一个友情链接。
添加图标颜色,在原来代码的基础上添加下标签即可
图标参考官网:
https://fontawesome.com/
https://fontawesome.com/v4.7.0/
版本4.7
那么fontawesome图标怎么用呢? 接下来需要导入下官网地址https://www.bootcdn.cn/
bootsrap利用的是<span>标签引用的,那么fontawesome利用的是<i>标签引用的
如果我们想fontawesome中的微信图标,搜一下就好了,进入之后点击 Start Using Font Awesome就会进入到以下截图中
<!--加上color更改图标颜色-->
Larger Icons
You can place Font Awesome icons just about anywhere using the CSS Prefix fa
and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i>
tag for brevity, but using a <span>
is more semantically correct).
Larger Icons
To increase icon sizes relative to their container, use the fa-lg
(33% increase), fa-2x
, fa-3x
, fa-4x
, or fa-5x
classes.
List Icons
Use fa-ul
and fa-li
to easily replace default bullets in unordered lists.
Animated Icons
Use the fa-spin
class to get any icon to rotate, and use fa-pulse
to have it rotate with 8 steps. Works well with fa-spinner
, fa-refresh
, and fa-cog
.
Rotated & Flipped
To arbitrarily rotate and flip icons, use the fa-rotate-*
and fa-flip-*
classes.
接下来实例就让微博图标示范下:
Stacked Icons
To stack multiple icons, use the fa-stack
class on the parent, the fa-stack-1x
for the regularly sized icon, and fa-stack-2x
for the larger icon. fa-inverse
can be used as an alternative icon color. You can even throw classes on the parent to get further control of sizing.
如果想让禁止发微博可以添加以下代码:
Bootstrap 3 Examples
Font Awesome works great with the full range of Bootstrap components.
如:添加Delete按钮参考官网
本地使用需要下载
https://fontawesome.com/v4.7.0/get-started/#modal-download