Home Forums Fashionic WordPress Theme icons are buggy

This topic contains 6 replies, has 2 voices, and was last updated by  Johnny 4 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1428

    xurubo93
    Participant

    Hi,

    I have included some icons in the body-text of a content-item on my page. On the edit-form this icon is shown as:
    [icon] mail [/icon]email@email.com

    After the content is built, the mail-address is shown outside the <p>-tag. The HTML-structure shows as follows:
    <p class="icon mail "></p>email@email.com
    You can see, that the mail-address which comes after the icon is not included into the <p>-tag. The problem here is, that the font which is defined for the site is not used in this case.

    Is there a way to include the text after the icon into the appropriate tag?

    cheers

    #1431

    Johnny
    Participant

    hi, you can format the email text with editor’s toolbar directily or simply press enter key at the beginning of the email text to make it place into p tag,
    Thank you

    #1442

    xurubo93
    Participant

    Hi,

    I think I was not clearly enough in my description. I would like to have the mail-address placed directly after the icon (beside the icon).

    When I press the enter key directly at the beginning of the text a line-break is included automatically and the text is placed directly under the icon.

    The structure is then:`<p class=”icon mail “></p>
    <p></p>
    <p>
    email@email.com
    <br>
    </p>`

    The correct structure should be:
    <p class="icon mail ">email@email.com</p>

    cheers

    #1464

    Johnny
    Participant

    Hi, please copy this code <p class="icon mail" style="text-indent:24px">email@email.com</p> directly in text mode of you editor and click update button,
    Thank you

    #1471

    xurubo93
    Participant

    This will not work, because the width of the <p>-tag is set to 22px. I will do this on my own and come to you with my solution which will work.

    #1472

    xurubo93
    Participant

    I’ve done it with the following code:

    <div class="phone">
      <div class="icon"></div>
      <div class="text">
        <p><a href="tel:+123456789">+123456789</a></p>
      </div>
    </div>
    <div class="mail">
      <div class="icon"></div>
      <div class="text">
        <p>mail@mail.com</p>
      </div>
    </div>
    <div class="location">
      <div class="icon"></div>
      <div class="text">
        <p>Location</p>
      </div>
    </div>

    Further I had to extend the custom_style inside the theme with:

    .phone .icon {
      background: url("../img/icon.png") no-repeat scroll -245px -54px;
    }
    
    .mail .icon {
      background: url("../img/icon.png") no-repeat scroll -377px -25px;
    }
    
    .location .icon {
      background: url("../img/icon.png") no-repeat scroll -342px -26px;
    }
    
    .icon {
        display: inline-block;
        float: left;
        height: 24px;
        width: 24px;
    }
    
    .text {
        display: inline-block;
        margin: 1px 0 0 10px;
        width: auto;
    }

    Just for your information and for future updates for your theme 🙂

    #1474

    Johnny
    Participant

    you are greate! thank you very much.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.