4 Replies Latest reply on Apr 22, 2010 11:42 AM by Peter deHaan

    Unicode dingbats for button labels?

    jsd99 Level 3

      I really want to use unicode dingbats as my button labels, but Flex won't play ball.  Well, not on Windows anyway.  It works fine on Mac.

       

      I found a ttf with the unicode dingbats in it called Symbola and embedded it into the swf (as "Symbolax" to make sure it was picking up the embedded version and not the system one).  It works fine if I use it for an mx:Text, but it doesn't work as a button label.  Example:

       

          <mx:Button width="30" height="100" label="&#x276f;" textRollOverColor="#ffffff" fontFamily="Symbolax"/>
          <mx:Text text="characters are fun &#x276f;" fontFamily="Symbolax" />

       

      Results in:

       

      Noname.png

      You can see that the Text control is using the embedded font, but the button label isn't.  On Mac, it works fine without embedding any fonts.  Help!

        • 1. Re: Unicode dingbats for button labels?
          Peter deHaan Level 4

          Try setting the font weight on the button to "normal" (default is bold):

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              
              <mx:Style>
                  @font-face {
                      src: url("Symbola.otf");
                      fontFamily: Symbolax;
                      fontWeight: normal;
                  }
              </mx:Style>
              
              <mx:Button width="30" height="100" 
                  label="&#x276f;" textRollOverColor="#ffffff"
                  fontFamily="Symbolax" fontWeight="normal" />
           
              <mx:Text text="characters are fun &#x276f;"
                  fontFamily="Symbolax" />
              
          </mx:Application>

           

           

          Peter

          • 2. Re: Unicode dingbats for button labels?
            Peter deHaan Level 4

            Sorry, I just noticed that your button width isn't really wide enough for the text label and it is displaying a tool tip. The toolTip uses the default Arial font (I think), so you'll need to do some CSS-ery to display the tool tip in your specified font if you want it to appear correctly. A slightly better example is probably:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                
                <mx:Style>
                    @font-face {
                        src: url("Symbola.otf");
                        fontFamily: Symbolax;
                        fontWeight: normal;
                    }
                    
                    Button {
                        fontFamily: Symbolax;
                        fontWeight: normal;
                        textRollOverColor: white;
                    }
                    
                    Label {
                        fontFamily: Symbolax;
                    }
                    
                    ToolTip {
                        fontFamily: Symbolax;
                    }
                </mx:Style>
                
                <mx:Button label="&#x276f;" width="30" height="100" />
                <mx:Text text="characters are fun &#x276f;" />
                
            </mx:Application>
            

             

            Peter

            • 3. Re: Unicode dingbats for button labels?
              jsd99 Level 3

              Thanks Peter.  Font-weight medium did the trick.  Is it possible to switch fonts in a button label?  I need it to look like "NEXT >" where NEXT is one font, and the > is a unicode triangle.

              • 4. Re: Unicode dingbats for button labels?
                Peter deHaan Level 4

                Off the top of my head I don't believe it is possible to use multiple fonts in an MX Button control label in Flex 3.x.

                 

                Peter