Updating banner ad

src/_includes/navbar.html

@@ -15,11 +15,17 @@
   <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>&nbsp;
           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>&nbsp;
+          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>&amp; CSS toolkit">
           <i class="fa fa-font-awesome"></i>&nbsp;

src/assets/js/site.js

@@ -3,31 +3,57 @@ $(function () {
 
   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",

src/assets/less/site/banner-ad.less

@@ -13,7 +13,7 @@
   .tagline {
     font-weight: 200;
     font-size: 16px;
-    padding-right: 20px;
+    padding-right: 30px;
   }
 
   &.font-awesome-survey {
@@ -159,4 +159,56 @@
       }
     }
   }
+
+  &.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;
+        }
+      }
+    }
+  }
+
 }

src/assets/less/site/lazy.less

@@ -76,7 +76,7 @@
 
 
 .display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger
-.no-underline:hover { text-decoration: none; }
+.no-underline { text-decoration: none !important; }
 .clickable { cursor: pointer; }
 .strong { font-weight: bold; }
 .em { font-style: italic; }
@@ -110,3 +110,4 @@
 }
 
 .valign-baseline { vertical-align: baseline !important; }
+.valign-middle { vertical-align: middle !important; }