BuyLog In
Ticket T547757
Visible to All Users

DevExtreme and using ionicons

created 8 years ago

Hi,
  I am trying to use the ionicons to add an con to a button.
I added the stylesheet to the project and referenced it in the index.html (see below)

But all I get is a kind of an x for the icon. The DevExtreme documentation shows using the format I dod for the icon definition…but having the space in it, seems a bit unusual. Can you verify that this is the correct format? The button size is the same size other buttons on which I have no trouble putting on icons from the DevExtreme icon library. It's just that the lDevExtreme library doesn't have the gas, water, and electric icons I need like ionicons does.

Thanks,
Don H

JavaScript
typeButton: {  
      type: "default",  
      icon: "ion ion-android-arrow-up",  
      text: "Type",  
      width: "15%"  
  }  
JavaScript
<link rel="stylesheet" type="text/css" href="css/dx.common.css" />  
<link rel="stylesheet" type="text/css" href="css/ionicons.min.css" />  
<link rel="stylesheet" type="text/css" href="css/sweetalert.css" />
Sign in to comment on this post

Answers approved by DevExpress Support

created 8 years ago

Hi Don,

Yes, the format is correct. Here's an online example: https://codepen.io/AlexSkorkin/pen/GvdvbO. Please check back.

    Show previous comments (1)
    Alex Skorkin (DevExpress) 8 years ago

      Don,

      I've referenced 'ioicons' in my example as follows:

      You need to reference 'ioicons.css' in index.html in your application. Make sure to specify a valid path to a corresponding CSS file.

      DH DH
      Don Harding 1 8 years ago

        I
        I was able to get it running. You have to add the font folder that comes with the ionicons download to the project. (I am attaching an image of my project folders). Make sure the folder location matches what is in the font-face description inside the ionicons.css file. Be sure, as you say, to refer to the .css file in the index.html page like this…

        JavaScript
        <link rel="stylesheet" type="text/css" href="css/ionicons.css" />  
        JavaScript
        @font-face { font-family: "Ionicons"; src: url("../fonts/ionicons.eot?v=2.0.0"); src: url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("../fonts/ionicons.woff?v=2.0.0") format
        Alex Skorkin (DevExpress) 8 years ago

          Don,
          Thank you for sharing your findings with us. I'm happy to hear that you have figured out how to resolve the issue.

          Sign in to comment on this post

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.