) containing placeholder text. It is used to display a block of text on a web page, typically for content that requires standard paragraph formatting. ```html
Sample text here...
``` -------------------------------- ### Installing jQuery with Composer Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/jquery/README.md This snippet provides the command to install jQuery using Composer, the dependency manager for PHP. It's typically used in PHP projects to manage libraries. ```Shell composer require components/jquery ``` -------------------------------- ### Serving Bootstrap Documentation Locally with Jekyll Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap/README.md This command executes Jekyll via Bundler to build and serve the Bootstrap documentation locally, making it accessible in a web browser, typically at `http://localhost:9001`. ```Ruby bundle exec jekyll serve ``` -------------------------------- ### Loading Carbon Ads Script Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html This JavaScript snippet dynamically creates and inserts a script tag to load the Carbon Ads advertising platform. It sets the script type, async attribute, and source URL, then appends it to the document's head for display. ```JavaScript var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s); ``` -------------------------------- ### Importing Bootswatch Theme CSS in React (Generic) Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html This JavaScript import statement shows the general syntax for importing a Bootswatch theme's CSS file into a React application or similar JavaScript bundler setup. The `[theme]` placeholder should be replaced with the desired theme name. ```javascript import "bootswatch/dist/[theme]/bootstrap.min.css"; ``` -------------------------------- ### Building Jekyll Project and Documentation (Shell) Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/README.md This command uses Bundler to execute Jekyll's build process. It compiles the static site and documentation files, typically outputting them to the '_site' directory, ready for deployment. ```Shell bundle exec jekyll build ``` -------------------------------- ### Injecting Carbon Ads Script (JavaScript) Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html This JavaScript snippet dynamically creates and inserts a script tag into the document to load Carbon Ads. It sets the script type to 'text/javascript' and enables asynchronous loading for non-blocking execution. ```JavaScript var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s); ``` -------------------------------- ### Basic Bootstrap Starter Template (HTML) Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/extend.html This HTML template provides a minimal structure for a web page utilizing Bootstrap. It includes the necessary tag to import Bootstrap's CSS and a ``` -------------------------------- ### Cloning Bootswatch Repository Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/4/help/index.html This command downloads the entire Bootswatch project repository from GitHub. It is the first step required to set up a local development environment for customizing or creating Bootswatch themes. ```Shell git clone https://github.com/thomaspark/bootswatch.git ``` -------------------------------- ### Wrapping Inline Elements in HTML Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/tests/components.html Demonstrates how to wrap an HTML element like tags.
```HTML
```
--------------------------------
### Watching Bootswatch SASS Files for Changes
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html
This Grunt command continuously monitors the Bootswatch SASS files for any modifications. When changes are detected, it automatically triggers a rebuild of the theme's CSS and reloads the development server, streamlining the customization workflow.
```Shell
grunt watch
```
--------------------------------
### Importing Bootswatch Themes in Sass
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html
This snippet demonstrates the correct import order for integrating Bootswatch themes into a Sass project. It allows overriding theme variables by placing Bootstrap's `bootstrap.scss` between the theme's `_variables.scss` and `_bootswatch.scss` files.
```Sass
@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";
```
--------------------------------
### Displaying Font Awesome 'undo' Icon with HTML
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/undo/index.html
This HTML snippet demonstrates how to display the 'undo' icon from Font Awesome using the tag with the 'icon-undo' class. It's a basic example of integrating Font Awesome icons into a web page after proper setup.
```HTML
icon-undo
```
--------------------------------
### Customizing Font Awesome with LESS - Setting Font Path
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html
This LESS snippet shows how to configure the `@FontAwesomePath` variable in `font-awesome/variables.less`. This variable specifies the relative path from the compiled CSS directory to the Font Awesome font files, ensuring icons are correctly loaded.
```LESS
@FontAwesomePath: "../font";
```
--------------------------------
### Styling Global Body Elements in CSS
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/examples/carousel.html
This snippet defines global styles for the `body` element, setting a bottom padding and a default text color. It ensures content doesn't get hidden behind a fixed footer and provides a consistent base text color.
```CSS
body { padding-bottom: 40px; color: #5a5a5a; }
```
--------------------------------
### Importing Bootswatch 'Slate' Theme in React App.js
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html
This React component snippet demonstrates how to integrate the 'slate' Bootswatch theme into an `App.js` file. It imports the specific theme's CSS before other local CSS files, ensuring the theme styles are applied correctly.
```javascript
import React from 'react';\nimport logo from './logo.svg';\nimport 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:\nimport './App.css';\n\nfunction App() {\n...
```
--------------------------------
### Customizing Font Path for Font Awesome (SCSS)
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/get-started.html
This snippet shows how to customize the font path for Font Awesome when using custom LESS or SASS. The '@fa-font-path' variable in '_variables.scss' (or 'variables.less') needs to be updated to correctly reference the font directory, relative to the compiled CSS output.
```scss
@fa-font-path: "../font";
```
--------------------------------
### Styling Code Blocks and Headings with CSS
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html
This CSS snippet defines styles for `` elements, adding top padding, and for `` elements, setting a light gray background and inheriting text color. These styles are likely for general page layout and code block presentation.
```css
h1 { padding-top: 3em; } code { background-color: #eee; color: inherit; }
```
--------------------------------
### Customizing Font Awesome with LESS - Replacing Sprite Import
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html
This LESS snippet demonstrates how to integrate Font Awesome into a Bootstrap LESS project by replacing the default `sprites.less` import with the Font Awesome LESS file. This enables the compilation of Font Awesome styles directly within the Bootstrap build process.
```LESS
@import "sprites.less";
```
```LESS
@import "path/to/font-awesome/less/font-awesome.less";
```
--------------------------------
### Initializing Google Analytics and Typekit (JavaScript)
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/bitbucket/index.html
This JavaScript snippet initializes Google Analytics tracking and attempts to load Typekit. It sets up the Google Analytics account and tracks a pageview, then dynamically loads the Google Analytics script.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Initializing Google Analytics and Typekit - JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/instagram/index.html
This JavaScript snippet initializes Google Analytics tracking for page views and attempts to load Typekit fonts. It's typically placed in the or before the closing tag for web analytics and font services, ensuring tracking starts early and fonts are loaded.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Initializing Bootstrap Modals and Popovers with jQuery
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/test/test-full.html
This JavaScript snippet, executed on document ready, initializes Bootstrap's modal and popover components using jQuery. It ensures all modals are hidden by default and activates popovers for elements with the 'rel=popover' attribute, preventing the default link behavior upon click. This setup is crucial for interactive UI elements to function correctly.
```JavaScript
$(document).ready(function () { $('.modal').modal('hide'); $("\\[rel=popover\\]").popover().click(function(e){ e.preventDefault(); }); });
```
--------------------------------
### Installing Rails Gems
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass-official/README.md
This console command executes `bundle install`, which installs all gems listed in the Gemfile, including `jquery-rails`. This step is necessary to make the newly added gems available to the Rails application.
```console
$ bundle install
```
--------------------------------
### Creating Standard Description Lists in HTML
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/base-css.html
This HTML snippet shows the basic structure for a description list using ``, `- ` (definition term), and `
- ` (definition description) tags. It's suitable for defining terms and their associated explanations.
```HTML
- ...
- ...
```
--------------------------------
### Building Bootswatch Themes with Grunt
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/help/index.html
These Grunt commands are used to compile and build the CSS files for Bootswatch themes. `grunt swatch:[theme]` builds a specific theme, `grunt swatch:amelia` is an example for the 'Amelia' theme, and `grunt swatch` builds all available themes.
```Shell
grunt swatch:[theme]
```
```Shell
grunt swatch:amelia
```
```Shell
grunt swatch
```
--------------------------------
### Installing Bootstrap Sass via Bower (Console)
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass/README.md
This console command installs the `bootstrap-sass` package using Bower. This method is compatible with `node-sass` 3.2.0+. After installation, Sass, JS, and other assets are located in the `assets` directory within the Bower package.
```Console
$ bower install bootstrap-sass
```
--------------------------------
### Building Bootswatch Themes with Grunt
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/4/help/index.html
This Grunt command compiles the Sass files for a specified Bootswatch theme into CSS. Running `grunt swatch:[theme]` builds a single theme (e.g., `grunt swatch:flatly`), while `grunt swatch` builds all themes at once, generating the final CSS output.
```Shell
grunt swatch:[theme]
```
--------------------------------
### Initializing Google Analytics and Typekit in JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/refresh/index.html
This JavaScript snippet initializes Google Analytics for page view tracking and attempts to load Typekit. It sets up the Google Analytics account and asynchronously loads the `ga.js` script, ensuring proper tracking based on the page's protocol.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Initializing Google Analytics and Typekit - JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/lightbulb/index.html
This JavaScript snippet initializes Google Analytics for page tracking and attempts to load Typekit fonts. It sets up the Google Analytics account and asynchronously loads the `ga.js` script to track page views.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Initializing Google Analytics and Typekit in JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/level-up/index.html
This JavaScript snippet initializes Google Analytics tracking for the page and attempts to load Typekit. It sets up the Google Analytics account and tracks page views, dynamically loading the `ga.js` script.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Initializing Google Analytics and Typekit (JavaScript)
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/time/index.html
This JavaScript snippet initializes Google Analytics for page tracking and attempts to load Typekit. It sets up the Google Analytics account and asynchronously loads the `ga.js` script.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Installing Bootstrap-Sass via npm
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass-official/README.md
This console command demonstrates how to install the `bootstrap-sass` package using npm, which is the recommended method for Node.js environments. This command adds `bootstrap-sass` to your project's dependencies.
```console
$ npm install bootstrap-sass
```
--------------------------------
### Initializing Google Analytics and Typekit in JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/trello/index.html
This JavaScript snippet initializes Google Analytics tracking for page views and attempts to load Typekit fonts. It sets up the Google Analytics account and asynchronously loads the `ga.js` script.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Initializing Google Analytics and Typekit - JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/phone-sign/index.html
This snippet initializes Google Analytics tracking for the page, setting the account ID and tracking a pageview. It also attempts to load Typekit, gracefully handling any errors during the process. This is typically placed in the or before the closing tag.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Creating a Basic Navigation List with Headers in HTML
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/components.html
This HTML snippet demonstrates how to create a structured navigation list, often used in sidebars. By applying `nav` and `nav-list` classes to an unordered list, it allows for list headers (`nav-header`) and active states (`active`) to organize links.
```HTML
```
--------------------------------
### Scaling Font Awesome Icons
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html
This example illustrates how to increase the size of Font Awesome icons using utility classes like `icon-large`, `icon-2x`, `icon-3x`, and `icon-4x`. These classes proportionally scale the icon relative to its container.
```HTML
icon-camera-retro
icon-camera-retro
icon-camera-retro
icon-camera-retro
```
--------------------------------
### Demonstrating Bootstrap 3 Components with Font Awesome in HTML
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/_includes/examples/bootstrap.html
This HTML snippet showcases various Bootstrap 3 components, such as buttons and list items, integrated with Font Awesome icons. It illustrates basic navigation links and user action menus, demonstrating how Font Awesome can enhance Bootstrap's visual elements.
```HTML
[Delete](#) [Settings](#) [Font Awesome
Version {{ site.fontawesome.version }}](#)
[](#)[](#)[](#)[](#)
[User](#)[](#)
* [Edit](#)
* [Delete](#)
* [Ban](#)
* [Make admin](#)
```
--------------------------------
### Building Customized Bootswatch CSS
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/README.md
Executed from the `swatchmaker` directory, this command compiles the customized `variables.less` and `bootswatch.less` files into the final CSS files, which are then placed in the `swatch` directory.
```Shell
make bootswatch
```
--------------------------------
### Installing Bootstrap Sass via Bower
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass-official/README.md
This console command installs the `bootstrap-sass` package using Bower. This method is compatible with `node-sass` 3.2.0+ and places all Sass, JS, and other assets in the `assets` directory, making them available for use in projects configured with Bower.
```console
$ bower install bootstrap-sass
```
--------------------------------
### Initializing Google Analytics and Typekit (JavaScript)
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/btc/index.html
This JavaScript snippet initializes Google Analytics tracking for the page, setting the account ID and tracking a pageview. It also attempts to load Typekit fonts, gracefully handling any errors. This code is typically placed in the or before the closing tag for website analytics and font loading.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Cloning Bootstrap Repository with Git
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap/README.md
This command clones the official Bootstrap GitHub repository to your local machine, providing access to the full source code for development or customization.
```Shell
git clone https://github.com/twbs/bootstrap.git
```
--------------------------------
### Styling Body and Navbar - CSS
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/less/tests/navbar.html
This CSS snippet applies basic styling to the `body` element, setting padding, and to the `.navbar` class, adding a top margin. These styles are foundational for the layout of the Bootstrap navbar examples, ensuring proper spacing and positioning.
```css
body { padding-top: 0; padding-bottom: 30px; } .navbar { margin-top: 20px; }
```
--------------------------------
### Initializing Google Analytics Tracking - JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/pushpin/index.html
This JavaScript snippet initializes Google Analytics tracking for the page. It sets the account ID and tracks a pageview. It's a standard asynchronous Google Analytics implementation.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Initializing Google Analytics and Typekit - JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/credit-card/index.html
This JavaScript snippet initializes Google Analytics tracking for the page and attempts to load Typekit fonts. It sets up the GA account and tracks a pageview, dynamically injecting the GA script into the document.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```
--------------------------------
### Implementing Button Dropdowns with Font Awesome Icons
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html
This example demonstrates a Bootstrap button dropdown featuring Font Awesome icons within both the main button and the dropdown menu items. It uses `btn-group`, `dropdown-toggle`, and `dropdown-menu` classes, along with `icon-fixed-width` for alignment in the menu.
```HTML
```
--------------------------------
### Creating Prepended Form Inputs with Font Awesome Icons (HTML)
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html
This example shows how to create prepended form inputs using Bootstrap's `input-prepend` class combined with Font Awesome icons. The `add-on` span wraps the icon, visually attaching it to the input field.
```HTML
```
--------------------------------
### Initializing Google Analytics and Typekit in JavaScript
Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/community/index.html
This JavaScript snippet initializes Google Analytics tracking by setting the account ID and tracking a pageview. It also attempts to load Typekit, gracefully handling any errors. The script dynamically creates and inserts the Google Analytics script tag into the document.
```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```