<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>
- <a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
+ <a href="http://fortawesome.com/start?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
<i class="fa fa-fort-awesome fa-lg valign-baseline"></i>
Fort Awesome
</a>
</li>
+ <li>
+ <a href="http://symbolset.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Get the perfect icon set!">
+ <i class="fas fas-heart-ss"></i>
+ Symbolset
+ </a>
+ </li>
<li class="active">
<a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>& CSS toolkit">
<i class="fa fa-font-awesome"></i>
var ads = [
{
- quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
- class: "fort-awesome",
- url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.6_update",
+ quote: "<i class='fas fas-perfect fas-2x valign-middle margin-right'></i>Looking for the best icon sets? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.",
+ class: "symbolset",
+ url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_best_icons&utm_campaign=promo_4.6_update",
btn_text: "Gimme Some!"
},
{
- quote: "Make your icons load 10x faster! Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
- class: "fort-awesome",
- url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.6_update",
- btn_text: "Gimme Some!"
- },
- {
- quote: "Looking for other great icon sets? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
- class: "fort-awesome",
- url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.6_update",
- btn_text: "Gimme Some!"
- },
- {
- quote: "Want to add your own icon? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
- class: "fort-awesome",
- url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.6_update",
+ quote: "<i class='fas fas-curate fas-2x valign-middle margin-right'></i>Need a different look for your icons? Check out <strong>Symbolset</strong>, <a href='https://articles.fortawesome.com/fort-awesome-acquires-symbolset-72229dab2c13'>now</a> from the maker of Font Awesome.",
+ class: "symbolset",
+ url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_different_look&utm_campaign=promo_4.6_update",
btn_text: "Gimme Some!"
},
+ // {
+ // quote: "Fort Awesome <a href='#'>acquires</a> Symbolset!",
+ // class: "symbolset",
+ // url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_acquires&utm_campaign=promo_4.6_update",
+ // btn_text: "Check out Symbolset"
+ // },
+ // {
+ // quote: "<a href='#' class='no-underline'>Fort Awesome <i class='fa fa-plus fa-lg'></i> Symbolset = <i class='fa fa-heart fa-lg'></i></a>",
+ // class: "symbolset",
+ // url: "https://symbolset.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_math&utm_campaign=promo_4.6_update",
+ // btn_text: "Check out Symbolset"
+ // },
+ // {
+ // quote: "Take your icon game to the next level. Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
+ // class: "fort-awesome",
+ // url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.6_update",
+ // btn_text: "Gimme Some!"
+ // },
+ // {
+ // quote: "Make your icons load 10x faster! Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
+ // class: "fort-awesome",
+ // url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.6_update",
+ // btn_text: "Gimme Some!"
+ // },
+ // {
+ // quote: "Looking for other great icon sets? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
+ // class: "fort-awesome",
+ // url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.6_update",
+ // btn_text: "Gimme Some!"
+ // },
+ // {
+ // quote: "Want to add your own icon? Check out <strong>Fort Awesome</strong>, from the maker of Font Awesome.",
+ // class: "fort-awesome",
+ // url: "https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.6_update",
+ // btn_text: "Gimme Some!"
+ // },
+ //
+ //
// {
// quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
// class: "black-tie",
.tagline {
font-weight: 200;
font-size: 16px;
- padding-right: 20px;
+ padding-right: 30px;
}
&.font-awesome-survey {
}
}
}
+
+ &.symbolset {
+ @symbolset-bg: desaturate(#866cba,5%);
+ background-color: @symbolset-bg;
+ border-bottom: rgba(0,0,0,0.2);
+ a:not(.btn) {
+ text-decoration: underline;
+ color: #fff;
+ &:hover { color: rgba(255,255,255,.8); }
+ }
+ .btn-primary {
+ @color: @symbolset-bg;
+ @background: #fff;
+ @border: mix(#000,@symbolset-bg,10%);
+ font-weight: bold;
+ color: @color;
+ background-color: @background;
+ border-color: @border;
+ border-bottom-width: 2px;
+ text-shadow: none;
+ border-radius: 4px;
+
+ &:hover,
+ &:focus,
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ color: #fff;
+ background-color: rgba(0,0,0,0.2);
+ border-color: rgba(0,0,0,0.2);
+ border-bottom-color: rgba(0,0,0,0.2);
+ }
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ background-image: none;
+ }
+ &.disabled,
+ &[disabled],
+ fieldset[disabled] & {
+ &,
+ &:hover,
+ &:focus,
+ &:active,
+ &.active {
+ background-color: @background;
+ border-color: @border;
+ }
+ }
+ }
+ }
+
}