FontAwesome | 易学教程

如何实现自适应导航页

阅读更多关于如何实现自适应导航页

分辨率大于960像素分辨率大于768像素小于960像素分辨率大于480像素小于768像素分辨率小于480像素 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应导航页</title> <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="service-section"> <div class="inner-width"> <h2 class="section-title">Our Service</h2> <div class="border"></div> <div class="service-container"> <div class="service-box"> <div class="service-icon"> <i class="fas fa

阿里巴巴IconFont的图标的下载使用

阅读更多关于阿里巴巴IconFont的图标的下载使用

目前项目开发都是vue+element-ui模式，由于elementUI的icon图标库种类不多又不好看，所以基本不使用其自带的图标。一般都是引入第三方的图标资源，例如：fontawesome、或者阿里巴巴的iconfont。由于fontawesome的使用，会使得会全部下载所有的图标信息，使得项目变大，因此建议使用阿里巴巴的iconfont图标库。阿里巴巴矢量图标库地址： https://www.iconfont.cn/home/index ，里面有丰富的图标资源可选择。用法：　　1、直接下载.png文件格式，按照图片文件在项目中导入使用。　　2、下载.svg文件，按照svg文件再项目中使用，具体使用方法参考另一篇文章： https://www.cnblogs.com/luoxuemei/p/12154835.html 　　3、使用阿里巴巴图标项目管理功能，以下详细说明具体的使用方案。　　　　1）、选择所需的图标，加入购物车。　　　　　　2）、在购物车中，把所需的图标添加至项目。可新建项目或者选择以有的项目。　　　　　　对在此处新增的项目，其有默认的FontClass/Symbol和Font Family。我们可以自行修改，但是一定不要写成：el-icon-***这样的形式。如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突

bootstrap修改勾选样式

阅读更多关于 bootstrap修改勾选样式

小对勾需要引入awesome插件。 css部分： .bella-checkbox{ position: relative; } /** 将初始的checkbox的样式改变 */ .bella-checkbox input[type="checkbox"] { opacity: 0; /*将初始的checkbox隐藏起来*/ } /** 设计新的checkbox，位置 */ .bella-checkbox label:before { content: ''; width: 18px; height: 18px; display: inline-block; border-radius: 2px; border: 1px solid #bbb; background: #fff; } /** 点击初始的checkbox，将新的checkbox关联起来 */ .bella-checkbox input[type="checkbox"]:checked + label:after { display: inline-block; font-family: 'FontAwesome'; content: "\f00c"; top: 1px; left: 0px; position: absolute; font-size: 10px; line-height: 1.7; width:

在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5

阅读更多关于在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5

前言本文写于2020年1月11日，仅提供最基本的引用方法，参考fontawesome5英文官方文档和vue-fontawesome英文官方文档。正文在vue项目中使用fontawesome5图标，不需要引入fontawesome组件，直接引入vue-fontawesome和相关组件就可以了。第1步：npm install 在vue项目目录中执行下面的安装命令： npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/vue-fontawesome 其中： @fortawesome/free-solid-svg-icons是solid风格图标 @fortawesome/free-regular-svg-ico是regular风格图标 @fortawesome/free-brands-svg-icons是品牌图标这三个可以根据项目实际需要选择性安装，当然如果有专业版授权，也可以引入诸如

[EasyUI美化换肤]更换EasyUi图标

阅读更多关于 [EasyUI美化换肤]更换EasyUi图标

前言本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式..我换个皮肤..就更不谈..) 其实重点看需求,我们主要做的后台项目对手机Web几乎没要求,所以,暂不考虑效果图上几张效果图先: 整体布局树形菜单: 菜单列表: 改了之后还是可以的(毕竟我也不是专业的美工,我就是个.NET的开发..没办法..被逼的.. ).. 正文其实我们引用EasyUI的时候就可以发现,除了要引用easyui.css还要加一个icon.css,这里面就是EasyUI的图标了,我们看看里面如图: 里面都是一些.icon开头的样式,对应的都是一些background地址,这里我们就有两种换的方案第一种简单无脑版:重做这些图片大小一致图片换掉.. 第二种高端大气无后患版:找到新的图标替代我反正..选择了第二种..,我们选择Font-awesome3.2,这个图标集来替换, 为什么选择这个呢 1.他的3.2版本CSS开头也是.icon(4.0+版本换成了fa)方便我们替换 2.图标够多..完全够用我们直接打开Font-awesome提供的CSS样式. 将EasyUI的样式复制到Font-awesome的最下面. 然后把其中的背景图样式全部删除.

适合前端开发和UI 设计的20多个最佳 ICON 库

阅读更多关于适合前端开发和UI 设计的20多个最佳 ICON 库

【推荐阅读】微服务还能火多久？>>> 在应用界面中图标的存在，会给用户一个良好第一印象，这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它们增加了可读性，突出了重要的内容，加强了功能或特性，增强了设计。因此，使用现成图标是很好的一个选择。最佳图标库的列表这里阿里的 iconfont 就不做介绍的，国内的开发者基本都知道，也都在用，现在我们来看看国外有哪些好用的图标库。 Flaticon 网址：https://www.flaticon.com/packs 格式和类型：PNG, SVG, EPS, PSD, and BASE 64, Marketplace 价格和许可证：有限的免费套餐和高级套餐，每月9.99美元起 Flaticon 包含完全可编辑的矢量，可用于个人和商业项目。FlatIcon 拥有超过 230 万个向量图标，它们被分组到 51202 个包中该产品有 Adobe 扩展，允许我们轻松导入 Photoshop , Illustrator 和 After Effects 中的图标。如果希望使用web字体而不是静态文件来显示图标，那么FlatIcon 将负责格式转换并生成一个可以使用的 web 字体。我们还可以自定义下载的图标。亮点：超过 90,000 个图标； SVG，EPS，PSD 和 PNG 格式；

【笔记】《Bootstrap实战》——第2章作品展示站点

阅读更多关于【笔记】《Bootstrap实战》——第2章作品展示站点

【推荐阅读】微服务还能火多久？>>> 文章目录一、搭建传送带（轮播图） 1.主要代码 2.使用说明二、创建响应式分栏 1.网格系统引入 2.使用说明三、链接转按钮 1.关键类说明 2.代码四、理解LESS 1.[嵌套（Nesting）](https://less.bootcss.com/#-nesting-) 2.[变量（Variables）](https://less.bootcss.com/features/#variables-feature) 3.[混合（Mixins）](https://less.bootcss.com/features/#mixins-feature) 4.[运算（Operations）](https://less.bootcss.com/features/#mixins-feature) 5.[导入（Importing）](https://less.bootcss.com/features/#imports-feature) 五、定制LESS文件 1.准备工作 2.导入新变量 3.编辑导航条变量六、添加Logo图片 1.加img 2.调整导航条内边距七、调整导航项内边距八、添加图标 1.使用BootStrap自带的Glyphicons 2.使用Font Awesome图标九、调整导航项图标颜色十、调整响应式导航条断点十一、调整传送带

uniGUI之主窗口折叠UI之UniTreeMenu(32-2)

阅读更多关于 uniGUI之主窗口折叠UI之UniTreeMenu(32-2)

【推荐阅读】微服务还能火多久？>>> 用uniGUI专有控件TUniTreeMenu 2.0给TUniTreeMenu菜单添加图标 2.1给TUniTreeMenu菜单添加事件 2.2修改背景色 2.3调整行高 2.4改变字体和大小 2] 用uniGUI专有控件TUniTreeMenu，类似标准控件的TreeView，还可以为每个菜单增加图标 2.0给TUniTreeMenu菜单添加图标其中左边的图标：Font Awesome [info]和[search],[home],[download],[trash],[refresh],[reply],[star],[user]有用，不是所有的都会显示出来。不推荐使用Font Awesome 推荐使用 Pictos,图标更全更多（[locate]显示不出来） 2.1给TUniTreeMenu菜单添加事件 2.1.1添加一个UniMenuItems1 2.1.2将UniTreeMenu1的SourceMenu设为UniMenuItems1 然后像普通的MainMenu操作UniMenuItems1，添加事件，选择图标存在的问题目前发现菜单太多时右侧不能自动出现滚动条，即太多的子菜单将超出屏幕范围，鼠标滚轮不能翻动菜单项，不太方便。如何解决呢？在UniTreeMenu的clientEvents属性里的UniEvents里

【笔记】《Bootstrap实战》——第5章电子商务网站

阅读更多关于【笔记】《Bootstrap实战》——第5章电子商务网站

【推荐阅读】微服务还能火多久？>>> 文章目录一、商品页的标记二、面包屑、页面标题和分页导航三、调整商品网格四、侧边栏和筛选选项 1.基本布局 2.Clearance Sale按钮 3.选项列表 4.为选项链接添加Font Awesome图标复选框 5.使用LESS混入在栏中对齐选项 6.针对平板和手机调整选项列表布局 7.在手机上折叠选项面板构建了公司网站之后，接下来就可以考虑设计一个在线商店了。此次的设计以上一章的设计为基础，只是添加了一个包含如下元素的新页面：包含商品小图、标题和说明的产品网格；位于左侧的变懒，用于按类别、品牌等筛选商品；方便用户导航的面包屑和分页链接。完成后的设计在大、中、小屏幕中的效果应该如下图所示：在超小屏幕上，希望页面的布局变成如下所示： Bootstrap 为完成此次设计提供了很好起点，在此基础上，要使用LESS完成调整工作。一、商品页的标记本章相对第四章新增products.html标记中的 head 、页头、导航条元素都和第 4章一样。不一样的地方在 main role="main"元素中，这个元素中包含的新内容按先后顺序是：用无序列表生成的面包屑导航链接；用 h1 表示的页面标题；一系列用于筛选商品的选项；九种商品，分别带有小图、标题、说明和按钮；用无序列表生成的分页链接，位于商品之下，站点页脚之上。

软件——Hexo-NexT配置个人博客

阅读更多关于软件——Hexo-NexT配置个人博客

Hexo-NexT配置个人博客一、安装NexT Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下，然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。 1.克隆最新版本在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码： $ cd your-hexo-site $ git clone https://github.com/iissnan/hexo-theme-next themes/next 2.直接下载前往 NexT 版本发布页面。选择你所需要的版本，下载 Download 区域下的 Source Code (zip) 到本地。例如，下载 v0.4.0 版本：解压所下载的压缩包至站点的 themes 目录下，并将解压后的文件夹名称（ hexo-theme-next-0.4.0 ）更改为 next 。二、启用主题与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开站点配置文件，Hexo目录下的_config.yml ，找到 theme 字段，并将其值更改为 next 。 # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next

订阅 FontAwesome