-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmydoc_icons.html
More file actions
474 lines (324 loc) · 28.8 KB
/
mydoc_icons.html
File metadata and controls
474 lines (324 loc) · 28.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="You can integrate font icons through the Font Awesome and Glyphical Halflings libraries. These libraries allow you to embed icons through their libraries del...">
<meta name="keywords" content="formatting, font icons, buttons, images, vectors, font awesome, glyphicons">
<title>Icons | IB-Ruby documentation</title>
<link rel="stylesheet" href="css/syntax.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/modern-business.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/customstyles.css">
<link rel="stylesheet" href="css/boxshadowproperties.css">
<!-- most color styles are extracted out to here -->
<link rel="stylesheet" href="css/theme-blue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="js/jquery.navgoco.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Anchor.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.0/anchor.min.js"></script>
<script src="js/toc.js"></script>
<script src="js/customscripts.js"></script>
<link rel="shortcut icon" href="images/favicon.ico">
<!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="documentation-theme-jekyll" href="https://github.com/feed.xml">
<script>
$(document).ready(function() {
// Initialize navgoco with default options
$("#mysidebar").navgoco({
caretHtml: '',
accordion: true,
openClass: 'active', // open
save: false, // leave false or nav highlighting doesn't work right
cookie: {
name: 'navgoco',
expires: false,
path: '/'
},
slide: {
duration: 400,
easing: 'swing'
}
});
$("#collapseAll").click(function(e) {
e.preventDefault();
$("#mysidebar").navgoco('toggle', false);
});
$("#expandAll").click(function(e) {
e.preventDefault();
$("#mysidebar").navgoco('toggle', true);
});
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
$(document).ready(function() {
$("#tg-sb-link").click(function() {
$("#tg-sb-sidebar").toggle();
$("#tg-sb-content").toggleClass('col-md-9');
$("#tg-sb-content").toggleClass('col-md-12');
$("#tg-sb-icon").toggleClass('fa-toggle-on');
$("#tg-sb-icon").toggleClass('fa-toggle-off');
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container topnavlinks">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="fa fa-home fa-lg navbar-brand" href="index.html"> <span class="projectTitle"> IB-Ruby Doc</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- toggle sidebar button -->
<li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
<!-- entries without drop-downs appear here -->
<li><a href="https://github.com/ib-ruby" target="_blank" rel="noopener">GitHub</a></li>
<li><a href="news">News</a></li>
<!-- entries with drop-downs appear here -->
<!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
<!--comment out this block if you want to hide search-->
<li>
<!--start search-->
<div id="search-demo-container">
<input type="text" id="search-input" placeholder="search...">
<ul id="results-container"></ul>
</div>
<script src="js/jekyll-search.js" type="text/javascript"></script>
<script type="text/javascript">
SimpleJekyllSearch.init({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
dataSource: 'search.json',
searchResultTemplate: '<li><a href="{url}" title="Icons">{title}</a></li>',
noResultsText: 'No results found.',
limit: 10,
fuzzy: true,
})
</script>
<!--end search-->
</li>
</ul>
</div>
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div id="main">
<!-- Content Row -->
<div class="row">
<!-- Sidebar Column -->
<div class="col-md-3" id="tg-sb-sidebar">
<ul id="mysidebar" class="nav">
<li class="sidebarTitle"> </li>
<!-- if you aren't using the accordion, uncomment this block:
<p class="external">
<a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
</p>
-->
</ul>
<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
<script>$("li.active").parents('li').toggleClass("active");</script>
</div>
<!-- Content Column -->
<div class="col-md-9" id="tg-sb-content">
<div class="post-header">
<h1 class="post-title-main">Icons</h1>
</div>
<div class="post-content">
<div class="summary">You can integrate font icons through the Font Awesome and Glyphical Halflings libraries. These libraries allow you to embed icons through their libraries delivered as a link reference. You don't need any image libraries downloaded in your project.</div>
<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
$( document ).ready(function() {
// Handler for .ready() called.
$('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });
/* this offset helps account for the space taken up by the floating toolbar. */
$('#toc').on('click', 'a', function() {
var target = $(this.getAttribute('href'))
, scroll_target = target.offset().top
$(window).scrollTop(scroll_target - 10);
return false
})
});
</script>
<div id="toc"></div>
<h2 id="font-icon-options">Font icon options</h2>
<p>The theme has two font icon sets integrated: Font Awesome and Glyphicons Halflings. The latter is part of Bootstrap, while the former is independent. Font icons allow you to insert icons drawn as vectors from a CDN (so you don’t have any local images on your own site).</p>
<h2 id="external-icons">External icons</h2>
<p>When you link to an external site, like <a href="http://jekyllrb.com">Jekyll</a>, an icon appears after the link. If you want to remove this icon, comment out this style in css/customstyles.css.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* this part adds an icon after external links, using FontAwesome*/</span>
<span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">^=</span><span class="s1">"http://"</span><span class="o">]</span><span class="nd">:after</span><span class="o">,</span> <span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">^=</span><span class="s1">"https://"</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">"\f08e"</span><span class="p">;</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">FontAwesome</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">normal</span><span class="p">;</span>
<span class="nl">font-style</span><span class="p">:</span> <span class="nb">normal</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">padding-left</span><span class="p">:</span> <span class="m">3px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="see-font-awesome-icons-available">See Font Awesome icons available</h2>
<p>Go to the <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome library</a> to see the available icons.</p>
<p>The Font Awesome icons allow you to adjust their size by simply adding <code class="language-plaintext highlighter-rouge">fa-2x</code>, <code class="language-plaintext highlighter-rouge">fa-3x</code> and so forth as a class to the icon to adjust their size to two times or three times the original size. As vector icons, they scale crisply at any size.</p>
<p>Here’s an example of how to scale up a camera icon:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro"</span><span class="nt">></i></span> normal size (1x)
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-lg"</span><span class="nt">></i></span> fa-lg
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-2x"</span><span class="nt">></i></span> fa-2x
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-3x"</span><span class="nt">></i></span> fa-3x
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-4x"</span><span class="nt">></i></span> fa-4x
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro fa-5x"</span><span class="nt">></i></span> fa-5x
</code></pre></div></div>
<p>Here’s what they render to:</p>
<p><i class="fa fa-camera-retro"></i> 1x
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
<p>With Font Awesome, you always use the <code class="language-plaintext highlighter-rouge">i</code> tag with the appropriate class. You also implement <code class="language-plaintext highlighter-rouge">fa</code> as a base class first. You can use font awesome icons inside other elements. Here I’m using a Font Awesome class inside a Bootstrap alert:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-exclamation-circle"</span><span class="nt">></i></span> <span class="nt"><b></span>Warning: <span class="nt"></b></span>This is a special warning message.
</code></pre></div></div>
<p>Here’s the result:</p>
<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle fa-lg"></i> This is a special warning message.</div>
<p>The notes, tips, warnings, etc., are pre-coded with Font Awesome and stored in the alerts.yml file. That file includes the following:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">tip</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="alert</span><span class="nv"> </span><span class="s">alert-success"</span><span class="nv"> </span><span class="s">role="alert"><i</span><span class="nv"> </span><span class="s">class="fa</span><span class="nv"> </span><span class="s">fa-check-square-o"></i></span><span class="nv"> </span><span class="s"><b>Tip:</span><span class="nv"> </span><span class="s"></b>'</span>
<span class="na">note</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="alert</span><span class="nv"> </span><span class="s">alert-info"</span><span class="nv"> </span><span class="s">role="alert"><i</span><span class="nv"> </span><span class="s">class="fa</span><span class="nv"> </span><span class="s">fa-info-circle"></i></span><span class="nv"> </span><span class="s"><b>Note:</span><span class="nv"> </span><span class="s"></b>'</span>
<span class="na">important</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="alert</span><span class="nv"> </span><span class="s">alert-warning"</span><span class="nv"> </span><span class="s">role="alert"><i</span><span class="nv"> </span><span class="s">class="fa</span><span class="nv"> </span><span class="s">fa-warning"></i></span><span class="nv"> </span><span class="s"><b>Important:</span><span class="nv"> </span><span class="s"></b>'</span>
<span class="na">warning</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="alert</span><span class="nv"> </span><span class="s">alert-danger"</span><span class="nv"> </span><span class="s">role="alert"><i</span><span class="nv"> </span><span class="s">class="fa</span><span class="nv"> </span><span class="s">fa-exclamation-circle"></i></span><span class="nv"> </span><span class="s"><b>Warning:</span><span class="nv"> </span><span class="s"></b>'</span>
<span class="na">end</span><span class="pi">:</span> <span class="s1">'</span><span class="s"></div>'</span>
<span class="na">callout_danger</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="bs-callout</span><span class="nv"> </span><span class="s">bs-callout-danger">'</span>
<span class="na">callout_default</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="bs-callout</span><span class="nv"> </span><span class="s">bs-callout-default">'</span>
<span class="na">callout_primary</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="bs-callout</span><span class="nv"> </span><span class="s">bs-callout-primary">'</span>
<span class="na">callout_success</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="bs-callout</span><span class="nv"> </span><span class="s">bs-callout-success">'</span>
<span class="na">callout_info</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="bs-callout</span><span class="nv"> </span><span class="s">bs-callout-info">'</span>
<span class="na">callout_warning</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><div</span><span class="nv"> </span><span class="s">class="bs-callout</span><span class="nv"> </span><span class="s">bs-callout-warning">'</span>
<span class="na">hr_faded</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><hr</span><span class="nv"> </span><span class="s">class="faded"/>'</span>
<span class="na">hr_shaded</span><span class="pi">:</span> <span class="s1">'</span><span class="s"><hr</span><span class="nv"> </span><span class="s">class="shaded"/>'</span>
</code></pre></div></div>
<p>This means you can insert a tip, note, warning, or important alert simply by using these tags.</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>note.html<span class="w"> </span><span class="na">content</span><span class="o">=</span><span class="s2">"Add your note here."</span><span class="w"> </span><span class="p">%}</span>
</code></pre></div></div>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>tip.html<span class="w"> </span><span class="na">content</span><span class="o">=</span><span class="s2">"Add your tip here."</span><span class="w"> </span><span class="p">%}</span>
</code></pre></div></div>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>important.html<span class="w"> </span><span class="na">content</span><span class="o">=</span><span class="s2">"Add your important info here."</span><span class="w"> </span><span class="p">%}</span>
</code></pre></div></div>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>warning.html<span class="w"> </span><span class="na">content</span><span class="o">=</span><span class="s2">"Add your warning here."</span><span class="w"> </span><span class="p">%}</span>
</code></pre></div></div>
<p>Here’s the result:</p>
<div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>::</b> Add your note here.</div>
<div class="alert alert-info" role="alert"><i class="fa fa-bars"></i> Here’s my tip.</div>
<div class="alert alert-warning" role="alert"><i class="fa fa-warning"></i> <b>Important:</b> This information is very important.</div>
<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle"></i> <b>Warning:</b> If you overlook this, you may die.</div>
<p>The color scheme is the default colors from Bootstrap. You can modify the icons or colors as needed.</p>
<h2 id="creating-your-own-combinations">Creating your own combinations</h2>
<p>You can innovate with your own combinations. Here’s a similar approach with a file download icon:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-download fa-lg"</span><span class="nt">></i></span> This is a special tip about some file to download....<span class="nt"></div></span>
</code></pre></div></div>
<p>And the result:</p>
<div class="alert alert-success" role="alert"><i class="fa fa-download fa-lg"></i> This is a special tip about some file to download....</div>
<p>Grab the right class name from the <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome library</a> and then implement it by following the pattern shown previously.</p>
<p>If you want to make your fonts even larger than the 5x style, add a custom style to your stylesheet like this:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.fa-10x</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1700%</span><span class="p">;}</span>
</code></pre></div></div>
<p>Then any element with the attribute <code class="language-plaintext highlighter-rouge">fa-10x</code> will be enlarged 1700%.</p>
<h2 id="glyphicon-icons-available">Glyphicon icons available</h2>
<p>Glyphicons work similarly to Font Awesome. Go to the <a href="http://getbootstrap.com/components/#glyphicons">Glyphicons library</a> to see the icons available.</p>
<p>Although the Glyphicon Halflings library doesn’t provide the scalable classes like Font Awesome, there’s a <a href="http://stackoverflow.com/questions/24960201/how-do-i-make-glyphicons-bigger-change-size">StackOverflow trick</a> to make the icons behave in a similar way. This theme’s stylesheet (customstyles.css) includes the following to the stylesheet:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.gi-2x</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span> <span class="m">2em</span><span class="p">;}</span>
<span class="nc">.gi-3x</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span> <span class="m">3em</span><span class="p">;}</span>
<span class="nc">.gi-4x</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span> <span class="m">4em</span><span class="p">;}</span>
<span class="nc">.gi-5x</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span> <span class="m">5em</span><span class="p">;}</span>
</code></pre></div></div>
<p>Now you just add <code class="language-plaintext highlighter-rouge">gi-5x</code> or whatever to change the size of the font icon:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-globe gi-5x"</span><span class="nt">></span></span>
</code></pre></div></div>
<p>And here’s the result:</p>
<p><span class="glyphicon glyphicon-globe gi-5x"></span></p>
<p>Glypicons use the <code class="language-plaintext highlighter-rouge">span</code> element instead of <code class="language-plaintext highlighter-rouge">i</code> to attach their classes.</p>
<p>Here’s another example:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-download"</span><span class="nt">></span></span>
</code></pre></div></div>
<p><span class="glyphicon glyphicon-download"></span></p>
<p>And magnified:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-download gi-3x"</span><span class="nt">></span></span>
</code></pre></div></div>
<p><span class="glyphicon glyphicon-download gi-3x"></span></p>
<p>You can also put glyphicons inside other elements:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-exclamation-sign"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span></span>
<span class="nt"><b></span>Error:<span class="nt"></b></span> Enter a valid email address
<span class="nt"></div></span>
</code></pre></div></div>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<b>Error:</b> Enter a valid email address
</div>
<h2 id="callouts">Callouts</h2>
<p>The previously shown alerts might be fine for short messages, but with longer notes, the solid color takes up a bit of space. In this theme, you also have the option of using callouts, which are pretty common in Bootstrap’s documentation but surprisingly not offered as an explicit element. Their styles have been copied into this theme, in a way similar to the alerts:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"bs-callout bs-callout-info"</span><span class="nt">></span>
This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. <span class="nt"></div></span>
</code></pre></div></div>
<div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-question-sign"></span> This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. </div>
<p>And here’s the shortcode:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{{site.data.alerts.callout_info}This is a special callout information message.{{site.data.alerts.end}}
</code></pre></div></div>
<p>Here’s the result:</p>
<div class="bs-callout bs-callout-info">This is a special callout information message.</div>
<p>You can use any of the following:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{{site.data.alerts.callout_default}}
{{site.data.alerts.callout_primary}}
{{site.data.alerts.callout_success}}
{{site.data.alerts.callout_info}}
{{site.data.alerts.callout_warning}}
</code></pre></div></div>
<p>The only difference is the color of the left bar.</p>
<p>Callouts are explained in a bit more detail in [Alerts][mydoc_alerts].</p>
<div class="tags">
<b>Tags: </b>
<a href="tag_formatting.html" class="btn btn-default navbar-btn cursorNorm" role="button">formatting</a>
</div>
</div>
<hr class="shaded"/>
<footer>
<div class="row">
<div class="col-lg-12 footer">
©2021 IB-Ruby. All rights reserved. <br />
<span>Page last updated:</span> July 16, 2016<br/> Site last generated: Jul 27, 2021 <br />
<p><img src="images/company_logo.png" alt="Company logo"/></p>
</div>
</div>
</footer>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /#main -->
</div>
</body>
</html>