FontAwesome | 易学教程

Longbow/longbow-select

阅读更多关于 Longbow/longbow-select

Bootstrap 风格下拉框 Bootstrap 风格页面中Select在不同的浏览器下呈现各有不同，但是相同的一点是非常的丑陋，由于表单录入、数据展示时下拉框经常与文本框一同使用，下拉框在form-control样式下与文本框宽度不一致，使用起来非常的别扭，本人利用文本框改造了一个下拉框样式使用起来非常方便与美观，与文本框一起使用非常完美。在线演示单页面演示： http://longbowenterprise.gitee.io/longbow-select/ 项目内演示： http://argo.zylweb.cn/ (本项目为开源后台管理框架 [ BootstrapAdmin ]) 快速开始组件依赖 jQuery bootstrap font-awesome CSS <link href= "https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" > <link href= "https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" > <link href= "./disk/longbow-select.css" > 将引入样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。 JS

管理系统的前端解决方案：Pagurian V1.3发布

阅读更多关于管理系统的前端解决方案：Pagurian V1.3发布

#Pagurian 一个管理系统的前端解决方案，致力于让前端设计，开发，测试，发布更简单。功能简介 Pagurian 适用于Web管理级的项目基于Sea.js遵循CMD规范，友好的模块定义,使业务开发更简单；集成了Datatable,Echarts等插件，调用方便，提升开发效率；自定义UI色板，构造自己独特色彩的UI。开发及构建用户可以在 Pagrian 的基础上进行二次开发目录结构 Pagurian ├── [.] .build ├── dist/ //发布目录 │ ├── lib/ │ ├── modules/ │ ├── plugins/ │ ├── resources/ │ └── templates/ ├── docs/ //开发文档 │ ├── api-datatable.md │ └── api-*.md ├── [.] node_modules/ //Grunt依赖的NodeJs 模块 ├── src/ //开发目录 │ ├── lib/ //框架依赖的基础库 │ ├── modules/ //业务模块 │ ├── plugins/ //插件模块 │ ├── resources/ //css,images,fonts │ └── templates/ //handlebars 模版文件 ├── test/ //测试 ├── Gruntfile.js

font-awesome图标转为图片

阅读更多关于 font-awesome图标转为图片

一、图标的本质 font-awesome图标是字体，专业术语叫 Icon Font，本质上是使用 PUA （ Private Unicode Area ）码位 Unicode 编码的字符，所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的，不一样的无非是编码。二、绘制图片理解了图标的本质，那图标转成文本就有了一个思路，把文本绘制到canvas上，就可以轻松获取到图片了 1.首先，创建一个html模板，引人 font-awesome <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"/> </head> <body> <i class="fa fa-address-book"></i> <canvas id="canvas"></canvas> </body> <script src="index.js" type="text/javascript" charset="utf-8"></script> </html> 2.获取到图标，并绘制到canvas上 //获取图标的字节编码 const icon =

Qt编写的项目作品1-自定义控件大全

阅读更多关于 Qt编写的项目作品1-自定义控件大全

一、功能特点超过160个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏，flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。每个类都可以独立成一个单独的控件，零耦合，每个控件一个头文件和一个实现文件，不依赖其他文件，方便单个控件以源码形式集成到项目中，较少代码量。qwt的控件类环环相扣，高度耦合，想要使用其中一个控件，必须包含所有的代码。全部纯Qt编写，QWidget+QPainter绘制，支持Qt4.6到Qt5.13的任何Qt版本，支持mingw、msvc、gcc等编译器，支持任意操作系统比如windows+linux+mac+嵌入式linux等，不乱码，可直接集成到Qt Creator中，和自带的控件一样使用，大部分效果只要设置几个属性即可，极为方便。每个控件都有一个对应的单独的包含该控件源码的DEMO，方便参考使用。同时还提供一个所有控件使用的集成的DEMO。每个控件的源代码都有详细中文注释，都按照统一设计规范编写，方便学习自定义控件的编写。每个控件默认配色和demo对应的配色都非常精美。超过130个可见控件，6个不可见控件。部分控件提供多种样式风格选择，多种指示器样式选择。所有控件自适应窗体拉伸变化。集成自定义控件属性设计器，支持拖曳设计，所见即所得，支持导入导出xml格式。

总结：如何修改美化radio、checkbox、select的默认样式

阅读更多关于总结：如何修改美化radio、checkbox、select的默认样式

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox、样式的方法。原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即 input[type=checkbox]:checked+label{} 利用css3伪元素实现样式修改 html代码 <p>您的性别：</p> <div class="radio-sex"> <input type="radio" id="sex1" name="sex"> <label for="sex1"></label> <span>男</span> </div> <div class="radio-sex"> <input type="radio" id="sex2" name="sex"> <label for="sex2"></label> 女 </div> css样式 .radio-sex { position: relative; display: inline-block; margin-right: 12px; } .radio-sex

教你认识Font Awesome 图标

阅读更多关于教你认识Font Awesome 图标

Font Awesome 是一套绝佳的图标字体库和CSS框架。Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。要使用Font Awesome图标，请在HTML页面的部分中添加以下行： 1、国内推荐 CDN： < link rel = " stylesheet " href = " https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css " > 2、海外推荐 CDN < link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css " > 3、直接下载到本地 Download 注意：不太建议下载来安装，直接在 html 文档头部引用 CDN 文件即可。注意：本教程使用的是 4.7.0 版本。您可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标。实例 < ! DOCTYPE html > < html > < head > < link rel = " stylesheet " href = " https://cdn.staticfile

bootstrap之FONTAWESOME 图标

阅读更多关于 bootstrap之FONTAWESOME 图标

本文转载于: 猿2048 网站➫ bootstrap之FONTAWESOME 图标终于暂时的结束了winform迎来了B/S的项目，这个需要我们自己写前端页面，要用bootstrap搭页面，本人小白，正在慢慢摸索中，主要记录遇到的问题，及解决办法。第一个，显示时间选择的控件。我在网上也搜了好多相关组件，但是可能跟我之前引入的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

如何写好CSS系列之表单(form)

阅读更多关于如何写好CSS系列之表单(form)

本文转载于: 猿2048 网站如何写好CSS系列之表单(form) 表单模块可以分为两部分：一是表单的布局，也就是规范表单元素单元的排列位置；二是表单元素，如：输入框、单选、复选、列表组件、搜索组件等，由于列表组件、搜索组件不是单纯的css组件，所以暂且没有实现。一、表单布局的实现表单布局分为：表单容器、行、表单元素组（包含元素标题、元素）。并且实现根据屏幕进行自适应。示例效果如下：从示例效果可以看出，布局会根据浏览器大小实现自适应。自适应代码如下： @import '../mixins/breakpoints'; .f-form-container { @extend .border-sizing; margin-top : $form-row-space ; > .f-form-row{ display : block ; white-space : nowrap ; margin : 0px ; padding : 0px ; font-size : 0px ; } > .f-form-row + .f-form-row { margin-top : $form-row-space ; } &.fluid { //自适应 xs = md -1 @include media-breakpoint-max('xs'){ .f-form-group{ display :

Font Awesome（一套很棒的图标库）

阅读更多关于 Font Awesome（一套很棒的图标库）

本文转载于: 猿2048 网站 Font Awesome（一套很棒的图标库） Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可： <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/> 当然也可以下载到本地使用，地址：http://fontawesome.io/ http://fontawesome.dashgame.com/ (中文网) （link的路径根据自己下载保存的位置来定）；使用方式： i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如： <i class="fa fa-info-circle"></i> 使用案例：官网给出了详细的使用案例哦（可以自己动手试试，真理来源于实践）：http://fontawesome.io

iconfont字体图标的使用方法--超简单!

阅读更多关于 iconfont字体图标的使用方法--超简单!

本文转载于: 猿2048 网站 https://www.mk2048.com/blog/blog.php?id=hh2a2ib&title=iconfont%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95--%E8%B6%85%E7%AE%80%E5%8D%95%21 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1 :百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2 :找到图标管理->我的项目->然后新建项目: 右边点击新建项目,用于保存自己常用的图标; step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车; 我现在将第一个安卓图标加入我的项目,点击加入购物车 step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目

订阅 FontAwesome