展开

关键词

Font Awesome矢量框架

一、font awesome简介 目前总数共519个; 不依赖Javascript 矢量形,无限缩放 免费,可用于商业 CSS控制样式,自定义颜色,大小,阴影,一切可能实现的效果 支持retina (苹果retina 屏幕) 源于BS框架(最初的目设计使用方向),现在基本支持主流的框架 兼容屏幕阅读器 用到的animation适用于IE8~9 二、font awesome下载及引入方法官网  — 点击Download即可下载最新版本Github — Font-Awesome仓库 三、font awesome使用方法 基本语法 ? 与bootstrap一起使用 Delete ? 配合列表一起使用 List icons can be used as bullets in lists ? 动 Loading... 翻转 normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical ? 层 ?

46760

BootStrap应用开发学习入门1

导航栏在移动设备的视中是的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。 #响应式的导航栏必须使用Bootstrap (Collapse)插件,并且的内容必须包裹在其中 .nav # ul 签 无序列表向导航栏添加链接.navbar-nav #ul 签 导航栏 常常和面板类class .panel 进行连用 基础属性: .panel-collapse #面板类.collapse #需要的元素.in #默认元素 - data-parent 属性把面板 - href 或 data-toggle=collapse 添加到您想要展开或的组件的链接上,Href设置元素的id锚- data-target= 可以创建不 accordion 记的简单的可组件 (collapsible); parent selector 默认值:false data-parent 如果提供了一个选择器,当可项目时,指定父元素下的所的元素将被关闭。

18420
  • 广告
    关闭

    云产品限时秒杀

    云服务器1核2G首年38元,还有多款热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    VS Code中6个令人惊叹的CSS扩展

    安装后,鼠指向选择器,按Ctrl就可以对应样式。? Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets? 当然,并非每个项目都使用BootstrapFont Awesome,但其中很多都可以。 这就是为什么我认为值得分享这个扩展,为Bootstrap 4Font Awesome 4Font Awesome 5提供intellisense。Bootstrap很多类,所以不可能记住它们。 与使用Font Awesome一样。每次我想添加一个时我都要查找语法,了它就不需要了!Bootstrap 4: ?Font Awesome 5: ?

    79510

    动手实践:美化 Jenkins 报告插件的用户界面

    font-awesome-api-plugin:为 Jenkins 插件提供 Font AwesomeFont Awesome矢量和社交徽,号称是网络上最受欢迎的集和工具包。 在这里,插件可以提供类似于“工作详细信息”视的框的摘要框。通常,插件在这里仅简短摘要,并提供指向详细结果的链接,例请参见 4。 如果您打算在其他地方使用,那么插件作者将自己留着:推荐的 Tango 集已 10 多年的历史了,如今太限了。几个选项可用,但最受欢迎的是 Font Awesome Icon Set。 它提供超过 1500 个遵循相同设计准则的免费:为了在插件中使用 Font Awesome ,您只需要依赖于相应的 font-awesome-api-plugin 即可。 您可以在这些卡中插件的任何,但是建议使用现Font Awesome 之一,以在 Jenkins 的插件生系统中获得一致的外观。

    97310

    Bootstrap快速入门

    随着bootstrap的火爆,出现了很多优秀插件,比如Font Awesome字体。 Bootstrap官网地址,demo和文档非常丰富。 其下载后的源码结构为: ? :用>表,例如table>thread>tr>th 兄弟选择器:临近兄弟用+,普通兄弟用~伪类:bootstrap支持的伪类包括:hover鼠划过时的, :focus元素焦点的, :first-child ,前后会换行符inline 默认,此元素会被为内联元素,没换行符inline-block 行内块元素list-item 此元素会以列表run-in 此元素会根据上下问作为块级元素和内联元素 表单:在form.less文件中设置,比较简单,基础的如,,class=checkbox;内联表单;横向表单;横向的表单内元素,如;控件,通过属性focus,disabled;验证,class= pagination.square > li > a { margin 0 5px;} 第三方扩展Font Awesome:是一款强大的icon集,可以进行矢量缩放,支持任意CSS对大小、颜色、阴影的操作

    1.1K60

    深入理解bootstrap

    ,h1,h1 .small稍小一点的字体,灰色2.额外的margin-bottom3.相让一个段落突出,可以使用.lead样式,增大字体大小、粗细、行间距和margin-bottom4.默认强调文本 活动:.active5.禁用:disabled属性或.disabled样式,样式不禁止按扭的默认行为G.像1.3种风格效果:.img-rounded、.img-circle、img-thumbnailH :.close关闭、.caret向下箭头4.内容浮动:.pull-right、pull-left、center-block、clearfix5.隐藏与:.show、.hidden(不占文档流)、 1.data-toggle=collapse配合data-target=使用,区域使用collapse和in样式2.默认隐藏区域,触发元素上添加一个.collapsed样式,去掉区域的in样式 ,配合data-offset使用六、实战:扩展现组件七、实战:Win8磁贴组件开发九、第三方扩展1.Font Awesome,.icon-xxx相关样式2.BSIE扩展,支持IE8以下浏览器3.Buttons

    37760

    前端学习自学笔记:day06

    在此之前先为大家下前端工程师的路线:? 注意:由于4+4+4=12.刚好平分Bootstrap的12栏布局。所以每个按钮占的部分相等。 签:创建文本内元素:text例:textlove结果:textlove(love是红色)Font Awesome库:一个非常方便的库。这些都是矢量形,被保存在 .svg 的文件格式中。 这些就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小。i元素:起初一般是让其它元素斜体(italic)的功能,不过现在一般用来指代。 你可以将 Font Awesome 中的 class 属性添加到 i元素中,把它变成一个例:fa fa-thumbs-up:赞谢谢大家观看~

    28450

    基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap的提取和利用

    1、菜单的及各种Bootstrap我们从下可以看到,为了菜单的美观,每个菜单项(这里分了三级菜单)都一个,虽然大小不同,我们利用Bootstrap,都是从Bootstrap库里面的内容 Bootstrap库里面分为了三类内容:Font Awesome:Bootstrap专用字体,Font Awesome 中包含的所都是矢量的,也就可以任意缩放,避免了一个做多种尺寸的麻烦 CSS对字体可以设置的样式也同样能够运用到这些上了。如下面是部分Font Awesome:? 2、各种Bootstrap的提取我们通过上面的介绍,估计对这几种Bootstrap了一定的了解,但是我们如果要能够在菜单编辑里面选择,那么我们还是需要把这些信息提取到数据库里面,然后展出来给我进行选择的 信息 每页 50 100 200 1000 条记录   共记录:0条,总页数:0页。 其中主要的内容在上面这部分的HTML里面。

    596100

    2021 年 Web 开发常用的五个库(建议收藏)

    Font Awesome?imgFont Awesome 是开发者常用的另一个流行库,主要是因为它直接支持 Bootstrap 和 CSS。 因为 Font AwesomeBootstrap CSS 框架中使用的默认集,它成为了任何使用 Bootstrap 开发项目的默认选择。 如果深入探究会发现,Font Awesome两个库,分别为免费版和专业版。免费版仅包含 1,598 个,而专业版包含额外的 6,250 个和其他功能。 Font Awesome 的主要特点从 Font Awesome 3.0 版本开始,不再需要注明出处。支持 CSS 和 Bootstrap。提供 CSS 类,Unicode 和 SVG 格式的。 完美适配高分辨率器。是可伸缩的。你可以在项目文档中找到更多关于 Fontisto 的使用信息。5. Streamline Icons?

    10010

    Bootstrap 响应式框架 第五集

    1、JS插件-签页 签页分为两个部分 1、导航部分(nav nav-tabs) li 的属性 :data-toggle=tab a 的属性:href=#内容的ID 2、内容部分 1、外层 : 2 第四层 作用:定义内容部分了 : 模框头部 关闭按钮: :模框主体 :模框脚注3、JS插件-插件(Collapse) 1、基本效果 1、触发器元素 1、a 元素充当触发器 属性: 1、data-toggle =collapse 2、href=#被元素ID 2、button 元素充当触发器 属性: 1、data-toggle=collapse 2、data-target=#被元素ID 2、被元素 属性: 1、class=collapse 2、id= ,提供给触发器使用 2、手风琴 - Accordion 3、响应式导航条 1、什么是响应式导航条 当屏幕尺寸>=768px时,可以正常的内容 ,当屏幕尺寸= 768时,不 屏幕尺寸 =768时,正常 屏幕尺寸 2、指定轮播时间 3、片说明文本的轮播 说明文本题 说明文本的内容 4方向按钮的轮播效果 5、圆点导航的轮播效果

    15110

    2021 年 Web 开发常用的五个库(建议收藏)

    Font AwesomeimgFont Awesome 是开发者常用的另一个流行库,主要是因为它直接支持 Bootstrap 和 CSS。 因为 Font AwesomeBootstrap CSS 框架中使用的默认集,它成为了任何使用 Bootstrap 开发项目的默认选择。 如果深入探究会发现,Font Awesome两个库,分别为免费版和专业版。免费版仅包含 1,598 个,而专业版包含额外的 6,250 个和其他功能。 Font Awesome 的主要特点从 Font Awesome 3.0 版本开始,不再需要注明出处。支持 CSS 和 Bootstrap。提供 CSS 类,Unicode 和 SVG 格式的。 完美适配高分辨率器。是可伸缩的。你可以在项目文档中找到更多关于 Fontisto 的使用信息。5.

    16130

    在网站或桌面应用使用Font Awesome

    Font Awesome介绍Font Awesome为您提供可缩放的矢量,您可以使用CSS所提供的所特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。 高分屏完美呈现Font Awesome的矢量,将使您的网站在视网膜级的高分屏上大放异彩。 完美兼容其它框架尽管是为Bootstrap设计,但Font Awesome同样能与其它框架完美协同运作。 例如,我要在页面中一个“链接”的,我可以这么写: 链接此时页面将出来了,那么对应链接的这个css类“fa-link”我是从哪里找来的呢?答案非常简单! 2.4 其他应用fontAwesome还其他更加复杂一点的应用,包括固定宽度、浮动、反转、旋转、等。 而对于字体,虽然WPF是直接支持的,但由于字体其特殊性,要将其还是需要费点劲的。本文这里就以Font-Awesome为例,介绍一下如何在WPF中使用字体

    48720

    Sublime3快捷键大全

    Sublime快捷键给我们来了便利,现在分享下在Sublime Text 2中的快捷键,如下: 快捷键功能ctrl+shift+n打开新Sublimectrl+shift+w关闭Sublime,关闭所打开文件 ctrl+shift+t重新打开最近关闭文件ctrl+n新建文件ctrl+s保存ctrl+shift+s另存为ctrl+f4关闭文件ctrl+w关闭ctrl+k, ctrl+b切换侧边栏f11切换全屏 +8select by indexalt+9select by indexalt+0select by indexf2next bookmarkshift+f2prev bookmarkctrl+f2切换 font sizealt+shift+winsert snippetctrl+shift+不ctrl+k, ctrl+1按层级(代码),数字是层级数ctrl+k, ctrl+2按层级(代码 ),数字是层级数ctrl+k, ctrl+3按层级(代码),数字是层级数ctrl+k, ctrl+4按层级(代码),数字是层级数ctrl+k, ctrl+5按层级(代码),数字是层级数ctrl

    24530

    04-移动端开发教程-在线字体

    在IE4开始微软就已经开始支持在线字体,不过没流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的准。也渐渐流行起来而且发掘了很多其他应用。1. 低质量的位在高清设备上放大后会难看的锯齿,无法满足响应式页面的开发需求在线字体来的革命:在线字体本质就是文字,但是也可是像形的文字。节省了宽(相比片)字体文件大小也不大(一般几百k)。 : YourWebFontName }4. bootstrap在线字体应用第一种:直接应用bootstrap提供的样式类型 第二种:直接下载bootstrap压缩包。 Font Awesome 提供了高可用性的矢量字体。它可以用强大的CSS自定义的大小、颜色、阴影等。 此在线工具可以选择、增加、修改、移动、上传等操作,操作完成后选择要下载的然后选择右下角的生成字体,然后就可以下载字体了。

    1.5K60

    04-移动端开发教程-在线字体

    低质量的位在高清设备上放大后会难看的锯齿,无法满足响应式页面的开发需求在线字体来的革命:在线字体本质就是文字,但是也可是像形的文字。节省了宽(相比片)字体文件大小也不大(一般几百k)。 这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。4. : YourWebFontName }4. bootstrap在线字体应用第一种:直接应用bootstrap提供的样式类型 第二种:直接下载bootstrap压缩包。 它可以用强大的CSS自定义的大小、颜色、阴影等。使用方法如下:(非常类似bootstrap) fa-lg fa-2x fa-3x fa-4x fa-5x Refreshing...6. 此在线工具可以选择、增加、修改、移动、上传等操作,操作完成后选择要下载的然后选择右下角的生成字体,然后就可以下载字体了。

    78560

    Day8:html和css

    : ellipsis 超出部分以省略号 字体iconfont icomoon字库 http:www.iconfont.cn 阿里icon font字库 `http:www.iconfont.cn fontello http:fontello.com Font-Awesome http:fortawesome.github.ioFont-Awesome字体设计字体上次生产字体包下载兼容字体包字体引入到 : 16px; } 我是文字 行高不单位 Demo body { line-height: 1.5; } div { font-size: 16px; } 行高不单位 复习 Demo 首页 元素的定位属性 position: static;放次序(z-index)元素的与隐藏display visibility 和 overflow display display 设置或检索对象是否及如何。 ,而是简单的裁切 ellipsis :  当对象内文本溢出时省略记(...)经典布局 导航栏内容 上传生成字体包推荐网站: http:icomoon.io 阿里icon font字库http:www.iconfont.cn

    33640

    记一次bootstrap-treeview的使用

    该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来一些继承树结构,如视树、列表树等等。? 例如清除它们的高亮。 $(#tree).treeview(clearSearch);collapseAll(options):的节点,整个树。 $(#tree).treeview(collapseAll, { silent: true });collapseNode(node | nodeId, options):指定节点和它的子节点如果不想子节点可以设置 $(#tree).treeview(remove);revealNode(node | nodeId, options):一个树节点,展开从这个节点开始到根节点的所节点。 $(#tree).treeview(toggleNodeDisabled, );toggleNodeExpanded(node | nodeId, options):切换一个节点的展开和

    1.9K30

    前端入门24-响应式布局(BootStrap)声明正文-响应式布局(BootStrap

    使用 BootStrap,上面的 HTML 文档模板是必须的,注释的都是在所使用了 BootStrap 的页面中需要引入的,需要注意的是,由于 BootStrap 一些组件依赖于 jQuery 和 官方BootStrap 4.x.x 版本,官方还没中文教程,3.x.x 的中文教程倒是很齐全了。 回过头看上面的动, 部分是作为导航栏,并且存在两种和展开,所以两种对应着两个 , 儿子签里刚好两个 ;看第一个 的 class:collapse bg-dark,collapse 是的意思 ,所以第一个 就是一开始被的容器,而控制这个 起来,也就是 BootStrap 提供的 collapse 起的作用了;同层次的第二个 的 class:navbar navbar-dark bg-dark 当区域逐渐变小时,布局从一行变成了两行,这就是响应式布局,来解释下为什么会这个行为:看看这两个区域的代码: ... ...

    51820

    舒适美观的mac终端, iTerm2+zsh+powerlevel9k+vim+virtualenv

    , 分别是ssh, 目录和git等版本管理 > 第三行设置右, 依次是, 是否是root, 作业指器, py的环境. set mouse=a 允许区域选择set selection=exclusive 高亮光所在行set cursorline 取消光闪烁set novisualbell 总是行set laststatus =2 当前执行的命令set showcmd 尺功能, 当前光所在行列号set rule 设置命令行高度为2set cmdheight=2 粘贴时保持格式 set paste 高亮匹配的括号 > 使用自代码 ``` 基于缩进或语法进行代码set foldmethod=indentset foldmethod=syntax 启动 vim 时关闭代码set nofoldenable ``` > * 进入vim命令模式, za即可当前块> * zM关闭所> * zR打开所 !

    78670

    快捷键整理

    shift+t 重新打开最近关闭文件 ctrl+n 新建文件 ctrl+s 保存 ctrl+shift+s 另存为 ctrl+f4 关闭文件 ctrl+w 关闭 ctrl+k, ctrl+b 切换侧边栏 f11 切换全屏 shift+f11 免打扰模式切换 backspace 删除左侧 shift+backspace 左侧删除 ctrl+shift+backspace 左侧全部删除 delete by index alt+9 select by index alt+0 select by index f2 next bookmark shift+f2 prev bookmark ctrl+f2 切换 minus decrease font size alt+shift+w insert snippet ctrl+shift+ 不 ctrl+k, ctrl+1 按层级(代码),数字是层级数 ctrl+k, ctrl+2 按层级(代码),数字是层级数 ctrl+k, ctrl+3 按层级(代码),数字是层级数 ctrl+k, ctrl+4 按层级(代码),数字是层级数 ctrl+

    27890

    相关产品

    • 人工智能

      人工智能

      提供全球领先的人脸识别、文字识别、图像识别、语音技术、NLP、人工智能服务平台等多项人工智能技术。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券