Custom Icon Sets

Custom icons in Hubstream require a little more work than using the standard icons. But ocassionally, you need to match existing visual language. This is how to do this in Hubstream.

I’m not an expert, but I’d like to do this

Contact support@hubstream.net with your request. Be sure to include your existing icons, with screenshots.

How does it work?

Hubstream uses primarily icon-fonts. WOFF files need to be shipped with the product, along with the corresponding CSS file. We also piggy back off of the bootstrap glyphicons implementation. So if you’re familiar with that pattern.

@font-face {
  font-family: 'commerce';
  src: url('external/fonts/commerce.woff?7730230') format('woff');
}

.glyphicon[class^="glyphicon-icon-commerce-"],
.glyphicon[class*="glyphicon-icon-commerce-"] {
    font-family: "commerce";
    top: 0;
}

[class^="glyphicon-icon-commerce-"]:before,
[class*="glyphicon-icon-commerce-"]:before {
    font-family: "commerce";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    min-width: 18px;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
}
 
.glyphicon-icon-commerce-003-money:before { content: '\e800'; } /* '' */
.glyphicon-icon-commerce-004-money:before { content: '\e801'; } /* '' */
.glyphicon-icon-commerce-005-tool:before { content: '\e802'; } /* '' */
.glyphicon-icon-commerce-006-money:before { content: '\e803'; } /* '' */
.glyphicon-icon-commerce-008-symbol:before { content: '\e804'; } /* '' */
...