Bootsrap字体图标使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap</title>

    <!-- 1.加载Bootstrap层叠样式表 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- 图标名称就是class属性值,放在span标签内 -->
    <span class="glyphicon glyphicon-glass"></span>

    <span class="glyphicon glyphicon-euro"></span>

    <!-- 加载JQuery和bootstrap核心js -->
    <script src="../JQ/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

时间: 2024-10-14 05:33:07

Bootsrap字体图标使用的相关文章

Bootstrap入门(七)组件1:字体图标

包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类和对应每个图标的类.把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格. 注意: 1.不要和其他组件混合使用 图标类不能和其它组件直接联合使用.它们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上. 2

Chrome 对于 glyphicon 字体图标不显示的解决的方法

在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到 ?custom.css 文件,路径为: C:\Users\(username)\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets 改动或添加内容为: .glyphicon {font-family: 'Glyphicons Halflings' !important;} /* For Glyphicons *

字体图标使用

最近写了一个使用bootstrap的项目,用到了字体图标,下面简要介绍一下在项目中使用字体图标的一些经验 1.在使用bootstrap时,body默认的字体是西文字体,所以需要手动设置字体 body { font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;} 2.在声明自己的字体图标时,使用css3的@font-face设

字体图标

首先,用代码编写字体图标之前新建文件夹pictonic然后添加以下几个文件(如下图所示) 添加后引用这个文件<link rel="stylesheet" href="pictonic/css/pictonic.css">,添加文件只需引用font和css就可以了 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu

CSS字体图标的制作方法

想制作字体图标, 需要先访问这个网站 , http://fontawesome.io/ 如果打开太慢可以用这个 ,http://www.bootcss.com/p/font-awesome/ 反正是一样的. 下载之后可以看到以下这些文件 , font中是字体, less和scss是css的源文件,src中是一些实例文件 自己动手写个demo, 目录如下 demo.html代码如下 <!doctype html> <html> <head> <meta charse

bootstrap字体图标

bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-C

Bootstrap 字体图标,下拉列表组件的使用

Bootstrap 字体图标,下拉列表组件的使用 Glyphicons 字体图标 通过代码可以看到图标类的使用方法,图标类不能和其它组件直接联合使用,图标类只能应用在不包含任何文本内容或子元素的元素上.所以一般在Button的text前面搞一个span标签,用来渲染图标. aria-label:有的图标可以没有文本,此时可以在代码中通过aria-label这个属性来表明图标的含义,比如这里的"左对齐". aria-hidden:设置其为true,表示图标只是为了装饰之用,避免读取设备的

练习,字体图标和before,afer伪类的方式开发慕课网右下角工具条

这个效果点击慕课网的这个地址就可以查看. 1. 字体图标的方式 相比较背景图片的方式,使用字体图标,会明显增加html结构的复杂度: <div class="toolbar-container"> <a href="javascript:;" class="tbitem tbitem-weixin"> <div class="tbitem-wrapper"> <span class=&

Bootstrap中的字体图标

使用 <span class="glyphicon glyphicon-th-large"> XX文字</span>引入字体图标.一般情况下文字放在span 标签之间,前面加一个空格,获得图标与文字之间的间距. 也可以将文字放在span标签之后. span标签经常出现在链接中,如将文字放在在span 标签之间,不会出现超链接下划线,如字体图标前面有空格,间距大,也可以将文字放在span标签之后会出现下划线.如前面有空格,间距小. <div class=&q