BootStrap中的Fontawesome 图标

 更新时间:2017年05月25日 17:26:53   作者:闲得无聊敲代码  
这篇文章主要介绍了BootStrap中Fontawesome 图标的相关知识,需要的朋友可以参考下

终于暂时的结束了winform迎来了B/S的项目,这个需要我们自己写前端页面,要用bootstrap搭页面,本人小白,正在慢慢摸索中,主要记录遇到的问题,及解决办法。

第一个,显示时间选择的控件。我在网上也搜了好多相关组件,但是可能跟我之前引入的js和css有冲突,所以出来的格式一直不对。后来就重新建了一个页面,专门显示datetimepicker,这次很容易就出来了。

@section CSS{
 <link href="~/Content/admin/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/admin/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />//需要引入的css,不过这里还缺一个,后面会提到。
}
<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">
@section Scripts{
 <script src="~/Content/admin/js/jquery.min.js"></script>
 <script src="~/Content/admin/js/bootstrap.min.js"></script>
 <script src="~/Content/bootstrap-datetimepicker.min.js"></script>
 <script src="~/Content/bootstrap-datetimepicker.zh-CN.js"></script>//需要引入的js文件
}
<script type="text/javascript">
 $(function () {
  $('#datetimeStart').datetimepicker({
   format: 'yyyy-mm-dd',
   minView: 'month',
   language: 'zh-CN',
   autoclose: true,
  }).on('click', function () {
   $('#datetimeStart').datetimepicker("setEndDate", $("#datetimeEnd").val())
  });
  $("#datetimeEnd").datetimepicker({
   format: 'yyyy-mm-dd',
   minView: 'month',
   language: 'zh-CN',
   autoclose: true,
  }).on("click", function () {
   $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart".val()))
  });
 }); //设置datetimepicker的一些初始属性,参考链接:http://www.cnblogs.com/yttsic/p/3492834.html
</script>

控件显示到页面上之后,我就发现不对劲,因为没有左右的箭头,又捣鼓了一阵,最后找到了对应的css文件,随后百度了这个的意思,才知道用的是fontawesome图标
而不是Glyphicon字体图标。(附参考链接:https://www.huangwenchao.com.cn/2014/12/font-awesome-css.html),最后恍然大明白,原来我没有加fontawesome图标的css文件

<link href="~/Content/admin/font-awesome/css/font-awesome.css" rel="external nofollow" rel="stylesheet" />//上面说的少个就是这个

以上所述是小编给大家介绍的BootStrap中的Fontawesome 图标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 手把手教你做超酷的条形码效果

    手把手教你做超酷的条形码效果

    手把手教你做超酷的条形码效果...
    2007-04-04
  • JavaScript实现Tab栏切换特效

    JavaScript实现Tab栏切换特效

    这篇文章主要为大家详细介绍了JavaScript实现Tab栏切换特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • js遍历详解(forEach, map, for, for...in, for...of)

    js遍历详解(forEach, map, for, for...in, for...of)

    在本篇文章里小编给大家整理的是关于js中的各种遍历(forEach, map, for, for...in, for...of)相关知识点用法总结,需要的朋友们参考下。
    2019-08-08
  • 前端常用的js函数方法

    前端常用的js函数方法

    这篇文章主要给大家分享的是常用的js函数的方法,告别搜索引擎的帮助,提高你的开发效率,,需要的朋友可以参考一下,希望对你的学习有所帮助
    2021-12-12
  • ajax在js中和jQuery中的用法实例详解

    ajax在js中和jQuery中的用法实例详解

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写),现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax,下面这篇文章主要给大家介绍了关于ajax在js中和jQuery中的用法,需要的朋友可以参考下
    2021-08-08
  • 基于JS组件实现拖动滑块验证功能(代码分享)

    基于JS组件实现拖动滑块验证功能(代码分享)

    拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,需要的朋友参考下吧
    2016-11-11
  • javascript GUID生成器实现代码

    javascript GUID生成器实现代码

    javascript GUID生成器实现代码, 需要的朋友可以参考下。
    2009-10-10
  • Javascript迭代、递推、穷举、递归常用算法实例讲解

    Javascript迭代、递推、穷举、递归常用算法实例讲解

    今天小编就为大家分享一篇关于Javascript迭代、递推、穷举、递归常用算法实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 使用gulp构建前端自动化的方法示例

    使用gulp构建前端自动化的方法示例

    这篇文章主要介绍了使用gulp构建前端自动化的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JS实现手风琴特效

    JS实现手风琴特效

    这篇文章主要为大家详细介绍了JS实现手风琴特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论