Glyphicons – Bootstrap 自适应网站字体图标

前端之家收集整理的这篇文章主要介绍了Glyphicons – Bootstrap 自适应网站字体图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap 内部包含了200多个免费图标。Glyphicons Halflings 通常只提供付费服务,这次免费为 Bootstrap 提供了这么多图标,所以如果你使用 Bootstrap 内部的 Glyphicons 图标,尽量为 Glyphicons Halflings 做个宣传,以示感谢。

使用方法如下:

Crayon-5c891d57c1a1a191931354" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">glyphicon
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891d57c1a1a191931354-1">1
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a1a191931354-2">2
Crayon-num" data-line="Crayon-5c891d57c1a1a191931354-3">3
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891d57c1a1a191931354-1">Crayon-o"><Crayon-v">pCrayon-e">Envelope Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-envelope"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">pCrayon-h">
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a1a191931354-2">Crayon-o"><Crayon-v">pCrayon-e">Search Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-search"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">p
Crayon-line" id="Crayon-5c891d57c1a1a191931354-3">Crayon-o"><Crayon-v">pCrayon-e">Print Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-print"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">p

效果如下:

font-cion

当然需要引用一些css和js等外部文件,完整的使用代码如下:

Crayon-5c891d57c1a22004314119" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">bootstrap glyphicon
Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">
Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
Crayon-button-icon">
Crayon-button Crayon-plain-button" title="Toggle Plain Code">
Crayon-button-icon">
Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
Crayon-button-icon">
Crayon-button Crayon-expand-button" title="Expand Code">
Crayon-button-icon">
Crayon-button Crayon-copy-button" title="Copy">
Crayon-button-icon">
Crayon-button Crayon-popup-button" title="Open Code In New Window">
Crayon-button-icon">
Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
Crayon-plain-wrap">
Crayon-main" style="">Crayon-table">Crayon-row">
Crayon-nums " data-settings="show">
Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-1">1
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-2">2
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-3">3
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-4">4
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-5">5
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-6">6
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-7">7
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-8">8
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-9">9
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-10">10
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-11">11
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-12">12
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-13">13
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-14">14
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-15">15
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-16">16
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-17">17
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-18">18
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-19">19
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-20">20
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-21">21
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-22">22
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-23">23
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-24">24
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-25">25
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-26">26
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-27">27
Crayon-num Crayon-striped-num" data-line="Crayon-5c891d57c1a22004314119-28">28
Crayon-num" data-line="Crayon-5c891d57c1a22004314119-29">29
Crayon-code">
Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
Crayon-line" id="Crayon-5c891d57c1a22004314119-1">Crayon-o"><Crayon-v">html
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-2">Crayon-h">Crayon-o"><Crayon-v">head
Crayon-line" id="Crayon-5c891d57c1a22004314119-3">Crayon-h">Crayon-o"><Crayon-e">Meta Crayon-v">nameCrayon-o">=Crayon-s">"viewport"Crayon-h"> Crayon-v">contentCrayon-o">=Crayon-s">"width=device-width,initial-scale=1"
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-4">Crayon-h">Crayon-o"><Crayon-e">link Crayon-v">relCrayon-o">=Crayon-s">"stylesheet"Crayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"
Crayon-line" id="Crayon-5c891d57c1a22004314119-5">Crayon-h">Crayon-ta">
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-6">Crayon-h">Crayon-ta">
Crayon-line" id="Crayon-5c891d57c1a22004314119-7">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">head
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-8">Crayon-h">Crayon-o"><Crayon-v">body
Crayon-line" id="Crayon-5c891d57c1a22004314119-9">Crayon-h">Crayon-o"><Crayon-e">div Crayon-t">classCrayon-o">=Crayon-s">"container"
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-10">Crayon-h">Crayon-o"><Crayon-v">h2Crayon-e">Asterisk Crayon-v">GlyphCrayon-o"><Crayon-o">/Crayon-v">h2
Crayon-line" id="Crayon-5c891d57c1a22004314119-11">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-v">iconCrayon-o">:Crayon-h"> Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-o"><Crayon-o">/Crayon-v">pCrayon-h">
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-12">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-e">icon Crayon-st">asCrayon-h"> Crayon-i">aCrayon-h"> Crayon-v">linkCrayon-o">:
Crayon-line" id="Crayon-5c891d57c1a22004314119-13">Crayon-h">Crayon-o"><Crayon-i">aCrayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"#"
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-14">Crayon-h">Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">span
Crayon-line" id="Crayon-5c891d57c1a22004314119-15">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">a
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-16">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">p
Crayon-line" id="Crayon-5c891d57c1a22004314119-17">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-e">icon Crayon-i">onCrayon-h"> Crayon-i">aCrayon-h"> Crayon-v">buttonCrayon-o">:
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-18">Crayon-h">Crayon-o"><Crayon-e">button Crayon-v">typeCrayon-o">=Crayon-s">"button"Crayon-h"> Crayon-t">classCrayon-o">=Crayon-s">"btn btn-default btn-sm"
Crayon-line" id="Crayon-5c891d57c1a22004314119-19">Crayon-h">Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-h"> Crayon-v">Asterisk
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-20">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">button
Crayon-line" id="Crayon-5c891d57c1a22004314119-21">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">p
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-22">Crayon-h">Crayon-o"><Crayon-v">pCrayon-e">Asterisk Crayon-e">icon Crayon-i">onCrayon-h"> Crayon-i">aCrayon-h"> Crayon-e">styled Crayon-e">link Crayon-v">buttonCrayon-o">:
Crayon-line" id="Crayon-5c891d57c1a22004314119-23">Crayon-h">Crayon-o"><Crayon-i">aCrayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"#"Crayon-h"> Crayon-t">classCrayon-o">=Crayon-s">"btn btn-info btn-lg"
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-24">Crayon-h">Crayon-o"><Crayon-e">span Crayon-t">classCrayon-o">=Crayon-s">"glyphicon glyphicon-asterisk"Crayon-o"><Crayon-o">/Crayon-v">spanCrayon-h"> Crayon-v">Asterisk
Crayon-line" id="Crayon-5c891d57c1a22004314119-25">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">a
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-26">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">pCrayon-h">
Crayon-line" id="Crayon-5c891d57c1a22004314119-27">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">div
Crayon-line Crayon-striped-line" id="Crayon-5c891d57c1a22004314119-28">Crayon-h">Crayon-o"><Crayon-o">/Crayon-v">body
Crayon-line" id="Crayon-5c891d57c1a22004314119-29">Crayon-o"><Crayon-o">/Crayon-v">html

可以访问下面的链接查看都有哪些图标,以及他们对应的代码
nofollow">http://www.bootstrapicons.com/index.htm?version=3.0.2

猜你在找的wordpress相关文章