Bootstrap中的Glyphicon 字体图标
在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Bootstrap 实例</title> 6 <!-- 包含头部信息用于适应不同设备 --> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- 包含 bootstrap 样式表 --> 9 <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"> 10 </head> 11 12 13 <body> 14 <div class="container"> 15 <h2>图标</h2> 16 <p>插入图标:</p> 17 <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p> 18 <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p> 19 <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p> 20 <p>打印图标: <span class="glyphicon glyphicon-print"></span></p> 21 <p>下载图标:<span class="glyphicon glyphicon-download"></span></p> 22 </div> 23 24 </body> 25 26 </html>
上面的运行代码如下:
下面是部分
参考地址:http://www.bkjia.com/webzh/951332.html
我喜欢程序员,他们单纯、固执、容易体会到成就感;面对压力,能够挑灯夜战不眠不休;面对困难,能够迎难而上挑战自我。他
们也会感到困惑与傍徨,但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是,其
实我是一个程序员
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了