1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Change Font Size Across Browsers

Discussion in 'Styling and Customization Questions' started by DRE, Aug 14, 2013.

  1. DRE

    DRE Well-Known Member

    I decided to use a symbol for the number 8 on my site's logo using a dingbat unicode. In Google Chrome, which is the main browser I use these days, the 8 looks fine but in browsers like IE and Firefox the 8 is too large. How can I resize the 8 for Firefox and IE but keep it the same in Chrome? In comparison, the other letters use pretty much the same font css (different color) but the font size is different. It's 40px for the other letters.

    This is my template code for the number 8.

    Template: logo_block
    Code:
    <span class="xf1_logo">❽</span>
    
    EXTRA.css

    Code:
    .xf1_logo{
        float: left;
        height: 40px;
        line-height: 38px;
        text-decoration: none;
        text-shadow: #0040FF 0px 0px 2px;
        font-family: 'Conv_cgothic';
        font-weight: normal;
        font-style: normal;
        font-size: 48px;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
    }
     

Share This Page