博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap框架(图标)
阅读量:6326 次
发布时间:2019-06-22

本文共 1745 字,大约阅读时间需要 5 分钟。

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更改图标颜色-->

 

   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).

 

 

 To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2xfa-3xfa-4x, or fa-5x classes.

 

 

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

 

 

 

 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-spinnerfa-refresh, and fa-cog.

 

 

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-*classes.

接下来实例就让微博图标示范下:

 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.

如果想让禁止发微博可以添加以下代码:

Font Awesome works great with the full range of Bootstrap components.

如:添加Delete按钮参考官网

 

 本地使用需要下载

https://fontawesome.com/v4.7.0/get-started/#modal-download

 

 

 

 

转载于:https://www.cnblogs.com/syf-com/p/10307668.html

你可能感兴趣的文章
JSTL的比较运算符有哪些,用例说说它们的作用
查看>>
怎么学JavaScript?来自前辈的分享 【转载】
查看>>
YYHS-Floor it(递推+矩阵乘法+快速幂)
查看>>
部署ceph mds node
查看>>
[LeetCode] Merge Sorted Array
查看>>
BZOJ1187:[HNOI2007]神奇游乐园——题解
查看>>
BZOJ3930:[CQOI2015]选数——题解
查看>>
CGI FASTCGI php-fpm
查看>>
在fragment中获取Application数据
查看>>
详解CSS float属性(转)
查看>>
利用JDBC连接Oracle数据库(转)
查看>>
Java基本语法-----java流程控制语句
查看>>
【面试 网络协议】【第十四篇】网络协议篇
查看>>
指令汇B新闻客户端开发(二) 主页面布局
查看>>
获取文本区域(textarea)行数【换行获取输入用户名个数】
查看>>
Mysql常用命令详解
查看>>
Android中实现iPhone开关
查看>>
是男人就下100层【第二层】——帮美女更衣(1)
查看>>
Web应用程序设计十个建议
查看>>
//……关于报文
查看>>