首页 > 其他分享 >Bootstrap教程(一)Glyphicons字体图标使用

Bootstrap教程(一)Glyphicons字体图标使用

时间:2023-09-13 11:03:05浏览次数:43  
标签:glyphicons 颜色 Title Bootstrap Glyphicons 引用 download 图标


一.已下载bootstrap 3.X

https://v3.bootcss.com/getting-started/#download

Bootstrap教程(一)Glyphicons字体图标使用_css

Bootstrap教程(一)Glyphicons字体图标使用_bootstrap_02

也可以CDN引用

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

二.引用页面中引用glyphicons 图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
	<ul>
	  <li>
        <span class="glyphicon glyphicon-send"></span>
      </li>
      <li>
        <span class="glyphicon glyphicon-share"></span>
      </li>
      <li>
        <span class="glyphicon glyphicon-share-alt"></span>
      </li>
      <li>
        <span class="glyphicon glyphicon-shopping-cart" style="color:blue;font-size:50px;"></span>
	  <li>
        <span class="glyphicon glyphicon-align-left"></span>
      </li>
      <li style="color:red;">
        <span class="glyphicon glyphicon-adjust">改变图标大小颜色</span>
      </li>
      <li style="color:blue;">
        <span class="glyphicon glyphicon-align-center"style="color:blue;font-size:50px;">改变图标大小颜色</span>
      </li>
    </ul>
</body>
</html>

运行效果

Bootstrap教程(一)Glyphicons字体图标使用_css_03

 

标签:glyphicons,颜色,Title,Bootstrap,Glyphicons,引用,download,图标
From: https://blog.51cto.com/ratelcloud/7452695

相关文章

  • Bootstrap教程(一)Font Awesome图标字体库
    一.下载 地址:http://fontawesome.dashgame.com/二.使用  ......
  • 图标鼠标移入移出动态效果
    效果示例这种效果起初是在腾讯云的官网上发现的,对这个效果比较好奇,所以就看了一下他的实现。然后自己写个demo记录一下。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-sca......
  • 不同小图标的编码网页中的大于号,小于号,应该用编码来代替,HTML中特殊字符和与之对应的A
    上面两个符号的HTML代码,>< >< 应用场景:当使用键盘无法打出来的时候。因为我测试在html代码中使用&amp;和&是等价的。带有实体名称的ASCII实体 常用的几个结果描述实体名称实体编号"quotationmark"&#34;'apostrophe&apos;&#39;&amper......
  • 如何设置el-tree点箭头图标才会展开或者收起(XTHS实测)
    在使用Element框架开发vue项目时,如何设置el-tree只有点击箭头图标才会展开或者收起效果呢?如图 转自:如何设置el-tree点箭头图标才会展开或者收起-百度经验(baidu.com)......
  • bootstrap_下拉菜单
     <divclass="form-group"><labelfor="inputPassword3"class="col-sm-2control-label">机台</label><divclass="col-sm-10">&......
  • css加载图标转圈代码
    转圈代码<iclass="el-icon-loading"></i>.el-icon-loading{animation:rotating2slinearinfinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframesrotating{0%{transfor......
  • LabVIEW图标编辑器中的文本变得模糊
    问题详述在LabVIEW图标编辑器中将文本添加到VI图标时,如果我将字体大小设置为小于10,文本会变得模糊。当字体大小设置为大于11时,文本会正常地显示,但是字体则变得太大而无法放入图标中。真难看!解决方案对于某些字体,这些字体比默认字体更详细,并且显示为像素化,可能会发生这种情......
  • Css 修改图标颜色_Css 修改图片颜色_Css控制图片颜色
    一、Css3mask修改图标颜色(推荐)CSS3mask默认是基于透明度实现遮罩效果的。也就是实色区域显示,透明区域隐藏。因此,我们只需要把目标图标颜色#f4615c作为背景色,然后原始图标(无论什么颜色都可以)作为遮罩图片,效果就出来了。<!DOCTYPEhtml><htmllang="en"><head><meta......
  • 详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
    文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一下。为何分享?踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。前言以下这个图说明了、如果你使用的是BootStrapV3,那么你在使用BootStrap的时候,同时需要依赖Jquery。这一篇文章......
  • vxe-table 坑:可编辑表格表头不显示编辑图标
    问题"vxe-table":"^3.5.9",官方文档默认显示编辑图标。但实际上没有显示。给vex-table的edit-config添加showIcon:true,也不生效。设置icon也不生效。替代方案给vxe-column设置插槽<template#default="{row}"></template>,内部显示内容添加icon。新的问题插......