bootstrap之FONTAWESOME 图标
2017-05-25 17:05
393 查看
终于暂时的结束了winform迎来了B/S的项目,这个需要我们自己写前端页面,要用bootstrap搭页面,本人小白,正在慢慢摸索中,主要记录遇到的问题,及解决办法。
第一个,显示时间选择的控件。我在网上也搜了好多相关组件,但是可能跟我之前引入的js和css有冲突,所以出来的格式一直不对。后来就重新建了一个页面,专门显示datetimepicker,这次很容易就出来了。
控件显示到页面上之后,我就发现不对劲,因为没有左右的箭头
,又捣鼓了一阵,最后找到了对应的css文件
,随后百度了这个的意思,才知道用的是fontawesome图标
,而不是Glyphicon字体图标。(附参考链接:https://www.huangwenchao.com.cn/2014/12/font-awesome-css.html),最后恍然大明白,原来我没有加fontawesome图标的css文件
加上之后就圆满了,(*^__^*) 嘻嘻……
第一个,显示时间选择的控件。我在网上也搜了好多相关组件,但是可能跟我之前引入的js和css有冲突,所以出来的格式一直不对。后来就重新建了一个页面,专门显示datetimepicker,这次很容易就出来了。
@section CSS{ <link href="~/Content/admin/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <link href="~/Content/admin/css/bootstrap.min.css" 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="stylesheet" />//上面说的少个就是这个
加上之后就圆满了,(*^__^*) 嘻嘻……
相关文章推荐
- 登录页面 输入框左侧加图标 炫酷透明效果 bootstrap css fontawesome联合打造
- nginx环境下bootstrap中font-awesome图标不显示的问题
- iconfont字体图标的使用方法--超简单! 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以
- Bootstrap+Font Awesome图标不显示 或显示错误解决办法
- 在SVG中使用Bootstrap或FontAwesome图标字体
- 关于nginx环境下bootstrap中font-awesome图标不显示的问题
- bootstrap利用Font Awesome给选择添加checkbox图标
- Font Awesome-为Bootstrap设计的图标字体
- 创建自定义字体图标-追加自定义图标到Bootstrap或者font Awesome中
- Font Awesome 完美的图标字体
- [Extjs6] 随记--如何修改font awesome图标的样式
- font-awesome代替icon小图标
- bootstrap 集成font-awesome
- Font Awesome可缩放的矢量图标
- 使用font-awesome 在input框中增加一个图标
- 图标库font-Awesome使用教程
- IE8 font-awesome问题,不能重绘,在dom加载完后执行一下下面的代码图标就出来了
- wpf 使用Font-Awesome图标字体
- FontAwesome 奥森图标的学习
- 前端学习_04_font-awesome字体图标