Setting up Black Tie can be as simple as adding a directory and a line of code to your website, or you can be a pro and customize the Less or Sass yourself! Black Tie even plays nicely with pretty much every web framework!
Use this method to get the default Font Awesome CSS.
black-tie directory into your project.<head> of your html, reference the location to your black-tie.min.css.
<link rel="stylesheet" href="path/to/black-tie/css/black-tie.min.css">
Use this method to customize Black Tie using Less or Sass.
black-tie/ directory into your project.black-tie/less/variables.less or black-tie/scss/_variables.scss and edit the @bt-font-path or $bt-font-path
variable to point to your font directory.
@bt-font-path: "../font";
The font path is relative from your compiled CSS directory.
Follow these steps to use Black Tie or Font Awesome Brands vector icons in your desktop applications.
BlackTie-*.otf and FontAwesomeBrands-Regular.otf on your machine.Check out the examples to see lots of great ways to use them.
Check out the examples to see lots of great ways to use them.
Check out the examples to see lots of great ways to use them.
Check out the examples to see lots of great ways to use them.
flag
You can place Black Tie icons just about anywhere using the proper CSS Prefix (bts, btb,
btr, btl, or fab) followed by bt-iconname.
<i class="bts bt-flag"></i> flag
fonticons
You can place Black Tie icons just about anywhere using the CSS Prefix fab followed by
fab-iconname.
<i class="fab fab-fonticons"></i> fonticons
Black Tie and Font Awesome Brand icons are designed to be used with inline elements (we like the <i>
tag for brevity, but using a <span> is arguably more semantically correct).
bt-sm
bt-lg
bt-2x
bt-3x
bt-4x
bt-5x
To change icon sizes relative to their container, use the bt-sm (25% decrease), bt-lg (33% increase), bt-2x,
bt-3x, bt-4x, or bt-5x classes.
<i class="bts bt-flag bt-sm"></i> bt-sm
<i class="bts bt-flag bt-lg"></i> bt-lg
<i class="bts bt-flag bt-2x"></i> bt-2x
<i class="bts bt-flag bt-3x"></i> bt-3x
<i class="bts bt-flag bt-4x"></i> bt-4x
<i class="bts bt-flag bt-5x"></i> bt-5x
Use bt-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists & list groups.
<div class="list-group">
<div class="list-group-item"><i class="bts bt-home bt-fw"></i> Home</div>
<div class="list-group-item"><i class="bts bt-book bt-fw"></i> Library</div>
<div class="list-group-item"><i class="bts bt-pencil bt-fw"></i> Applications</div>
<div class="list-group-item"><i class="bts bt-gear bt-fw"></i> Settings</div>
</div>
Use bt-ul and bt-li to easily replace default bullets in unordered lists.
<ul class="bt-ul">
<li><i class="bt-li bts bt-check-square"></i>List icons</li>
<li><i class="bt-li bts bt-check-square"></i>can be used</li>
<li><i class="bt-li bts bt-spinner bt-spin"></i>as bullets</li>
<li><i class="bt-li bts bt-square"></i>in lists</li>
</ul>
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Use bt-border and pull-right or pull-left for easy pull quotes or
article icons.
<i class="bts bt-quote-left bt-3x pull-left bt-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
Use the bt-spin class to get any icon to rotate, and use bt-pulse to have it rotate
with 8 steps. Works well with bt-spinner, bt-spinner-clock, bt-sync, and bt-gear.
<i class="bts bt-spinner bt-spin"></i>
<i class="bts bt-spinner-clock bt-spin"></i>
<i class="bts bt-sync bt-spin"></i>
<i class="bts bt-gear bt-spin"></i>
<i class="bts bt-spinner bt-pulse"></i>
normal
bt-rotate-90
bt-rotate-180
bt-rotate-270
bt-flip-horizontal
bt-flip-vertical
To arbitrarily rotate and flip icons, use the bt-rotate-* and bt-flip-* classes.
<i class="bts bt-shield"></i> normal<br>
<i class="bts bt-shield bt-rotate-90"></i> bt-rotate-90<br>
<i class="bts bt-shield bt-rotate-180"></i> bt-rotate-180<br>
<i class="bts bt-shield bt-rotate-270"></i> bt-rotate-270<br>
<i class="bts bt-shield bt-flip-horizontal"></i> bt-flip-horizontal<br>
<i class="bts bt-shield bt-flip-vertical"></i> bt-flip-vertical
To stack multiple icons, use the bt-stack class on the parent, the bt-stack-sm
for the small icon, and bt-stack-1x for the regular sized icon. bt-inverse
can be used as an alternative icon color. You can even throw larger icon classes on the parent
to get further control of sizing.
<span class="bt-stack bt-2x">
<i class="bts bt-square bt-stack-1x"></i>
<i class="fab fab-twitter bt-stack-sm bt-inverse"></i>
</span>
twitter on square<br>
<span class="bt-stack bt-2x">
<i class="bts bt-circle bt-stack-1x"></i>
<i class="bts bt-crown bt-stack-sm bt-inverse"></i>
</span>
crown on circle<br>
<span class="bt-stack bt-2x">
<i class="bts bt-hexagon bt-stack-1x"></i>
<i class="bts bt-code bt-stack-sm bt-inverse"></i>
</span>
code on hexagon<br>
<span class="bt-stack bt-2x">
<i class="bts bt-ban bt-stack-1x text-danger"></i>
<i class="bts bt-camera bt-stack-sm"></i>
</span>
camera on ban
By purchasing, downloading, using, or copying any image or part thereof, from the internet or by any other method, of any icons, symbols, or pictograms (“Product”) licensed by Fonticons, you automatically agree to the following terms and conditions:
“Product” is defined as any part or whole of one or more icons, symbols, or pictographic images in vector, raster, and/or font formats. “Webfont” is defined as font software that has been created, optimized, translated or otherwise modified for use by means of transmitting via the Internet for use in the viewing of text on a website. By way of explanation, not limitation, such uses can be implemented by means of the CSS @font-face rule. Other technology or software implementations used to effect similar results may apply and such uses or methods shall be governed by this Agreement.
Number of Users Licensor grants the Licensee a non-exclusive license to use the Product. The maximum number of simultaneous users is limited to five (5). All users must belong to the same company or household purchasing the Product.
Embedding You may embed the licensed fonts into documents you send to third parties. Such documents may be viewed and printed (but not edited) by the recipients.
You may embed the licensed fonts into software, including but not limited to websites and mobile applications. However, you may not redistribute or transfer the Product to end users or third parties through your software or by any means. An additional license is required if the software permits editing of text by end users or third parties.
Back-up You may make a reasonable number of back-up copies of the Product for archival purposes only. Copies must contain the same documentation, copyright, trademark, and other proprietary notices that appear on, in, or with the Product.
Service Bureaus You may take a digitized copy of the Product used in a particular document to a commercial print or service bureau for outputting this (a) particular document (this document must not be edited by the printer or service bureau). In the event of any modifications to the document or use of the Product for other purposes, the printer or service bureau must purchase its own Product license.
Copying Except for Embedding and Service Bureaus, you may not copy the Product or allow third parties to copy the Product. Any copy of the Product must contain the same copyright, trademark, and other proprietary information as the originals.
Modifications You may import characters from the font as graphical objects into a drawing program and modify such graphical objects.
You may not modify, adapt, translate, reverse engineer, decompile, disassemble, or create derivative works based on the licensed font itself without Fonticons’s prior written consent.
Except as expressly provided herein, you may not give, rent, or lease the Product or parts of it to third parties. You may transfer all your rights to use the Product and Documentation to another person or legal entity provided that:
No refund will be offered for products once sold. Because they are digital files, all symbols are not refundable or exchangeable. However files can be replaced if damaged or lost.
The font and the accompanying materials are copyrighted and contain proprietary information and trade secrets belonging to the designer owning the font. Unauthorized copying of the Product (even if modified, merged, or included with other software), or of the written materials, is expressly forbidden. You may be held legally responsible for any infringement of the foundry’s intellectual property rights that is caused or encouraged by your failure to abide by the terms of this Agreement.
All licensed Products are provided ‘as-is’ without warranty of any kind, either expressed or implied. Licensor is not liable for any damages arising out of any defects in the materials. You agree to hold Licensor harmless for any result that may occur during the course of using, or inability to use these licensed Products. In no event shall Licensor be liable for any damages including, but not limited to, direct, indirect, special, incidental or consequential damages or other losses arising out of the use of or inability to use the Products.
We reserve rights to change the prices of the Product and to update the Product without prior notice and at our sole discretion. We reserve the rights to make changes to this Agreement without any prior notice at our sole discretion. Any such changes will be reflected on this page.
This Agreement will be governed by the laws in force in the United States of America and Massachusetts excluding the application of its conflicts of law rules. This agreement will not be governed by the United Nations Convention of Contracts for the International Sale of Goods, the application of which is expressly excluded. If any part of this Agreement is found void and unenforceable, it will not affect the validity of the balance of the Agreement, which shall remain valid and enforceable according to its terms. You agree that the Product(s) will not be shipped, transferred, or exported into any country or used in any manner prohibited by export administration legislation or any other export laws, restrictions, or regulations.
Fonticons has the right to terminate your license immediately if you fail to comply with any term of this Agreement. Upon termination, you must destroy the original and any copies of the Product and Documentation.
black-tie/fonts/brands/.
black-tie/css/,
black-tie/less/, and
black-tie/scss/.