Center Launch Button

  • Posted in : Read WP
  • wondertracker
    Participant

    Hi,

    Please can you help me to center the launch button like on your demo here:

    http://themes.pixelwars.org/read-wp/home-alternate

    And how about adding an icon like you did ?

    I tried to put

    just before [launch_button text="TEST" url=""][/intro]

    but didn’t work…

    Many thanks

    mehmetsali
    Keymaster

    The demo content of that page:

    – In the Visual tab of editor:

    [intro]
    
    Hi! I am a [label]theoretical physicist[/label] developed the general theory of relativity, effecting a revolution in physics.
    
    [launch_button text="VIEW PORTFOLIO" url="http://themes.pixelwars.org/read-wp/portfolio"]
    [/intro]
    

    – In the Text tab of editor:

    [intro]
    <h2>Hi! I am a [label]theoretical physicist[/label] developed the general theory of relativity, effecting a revolution in physics.</h2>
    [launch_button text="VIEW PORTFOLIO" url="http://themes.pixelwars.org/read-wp/portfolio"]
    [/intro]
    
    wondertracker
    Participant

    thank you,

    but, how can I change the icon ?

    wondertracker
    Participant

    Do you think I could change the icon ?

    sağ olun ;-)

    mehmetsali
    Keymaster

    The button shortcode has built-in 12 different icons. Also you can add manually 220+ custom icons by using FontAwesome

    How to Use?

    — default usage:

    [button url=""]My Button[/button]
    

    — with icon usage;

    – e.g. for LinkedIn icon,
    – LinkedIn icon code is <i class=”icon-linkedin-sign”></i>
    – add icon code to the shortcode:

    [button url=""]<i class="icon-linkedin-sign"></i>My Button[/button]
    
    wondertracker
    Participant

    But how would you implement this with your example, where should I put what you mention…?

    [intro]
    Hi! I am a [label]theoretical physicist[/label] developed the general theory of relativity, effecting a revolution in physics.
    [launch_button text=”VIEW PORTFOLIO” url=”http://themes.pixelwars.org/read-wp/portfolio”]
    [/intro]

    Thank you

    mehmetsali
    Keymaster

    – switch to Text tab of the editor.

    [intro]
    Hi! I am a [label]theoretical physicist[/label] developed the general theory of relativity, effecting a revolution in physics.
    [button url=""]<i class="icon-camera-retro"></i>My Button[/button]
    [/intro]
    
    wondertracker
    Participant

    sorry but it doesn’t work… it makes a button with on black background , with no icon…

    wondertracker
    Participant

    i put this:

    [intro]
    [label]onebillionlove.com[/label] DUMMY TEXT
    [launch_button text=”DUMMY TEXT” url=”DUMMY URL”]
    [/intro]

    and I still have the suitcase !

    ;-)

    ahmetsali
    Keymaster

    Hi, you can change the icon via css, find your icon content code in css/font-awesome.css file and paste the content code below;

    .intro .launch-wrap:before { content: "\f0b1"; }
    

    Here are content codes for all available icons;

    .icon-glass:before                { content: "\f000"; }
    .icon-music:before                { content: "\f001"; }
    .icon-search:before               { content: "\f002"; }
    .icon-envelope:before             { content: "\f003"; }
    .icon-heart:before                { content: "\f004"; }
    .icon-star:before                 { content: "\f005"; }
    .icon-star-empty:before           { content: "\f006"; }
    .icon-user:before                 { content: "\f007"; }
    .icon-film:before                 { content: "\f008"; }
    .icon-th-large:before             { content: "\f009"; }
    .icon-th:before                   { content: "\f00a"; }
    .icon-th-list:before              { content: "\f00b"; }
    .icon-ok:before                   { content: "\f00c"; }
    .icon-remove:before               { content: "\f00d"; }
    .icon-zoom-in:before              { content: "\f00e"; }
    
    .icon-zoom-out:before             { content: "\f010"; }
    .icon-off:before                  { content: "\f011"; }
    .icon-signal:before               { content: "\f012"; }
    .icon-cog:before                  { content: "\f013"; }
    .icon-trash:before                { content: "\f014"; }
    .icon-home:before                 { content: "\f015"; }
    .icon-file:before                 { content: "\f016"; }
    .icon-time:before                 { content: "\f017"; }
    .icon-road:before                 { content: "\f018"; }
    .icon-download-alt:before         { content: "\f019"; }
    .icon-download:before             { content: "\f01a"; }
    .icon-upload:before               { content: "\f01b"; }
    .icon-inbox:before                { content: "\f01c"; }
    .icon-play-circle:before          { content: "\f01d"; }
    .icon-repeat:before               { content: "\f01e"; }
    
    /* \f020 doesn't work in Safari. all shifted one down */
    .icon-refresh:before              { content: "\f021"; }
    .icon-list-alt:before             { content: "\f022"; }
    .icon-lock:before                 { content: "\f023"; }
    .icon-flag:before                 { content: "\f024"; }
    .icon-headphones:before           { content: "\f025"; }
    .icon-volume-off:before           { content: "\f026"; }
    .icon-volume-down:before          { content: "\f027"; }
    .icon-volume-up:before            { content: "\f028"; }
    .icon-qrcode:before               { content: "\f029"; }
    .icon-barcode:before              { content: "\f02a"; }
    .icon-tag:before                  { content: "\f02b"; }
    .icon-tags:before                 { content: "\f02c"; }
    .icon-book:before                 { content: "\f02d"; }
    .icon-bookmark:before             { content: "\f02e"; }
    .icon-print:before                { content: "\f02f"; }
    
    .icon-camera:before               { content: "\f030"; }
    .icon-font:before                 { content: "\f031"; }
    .icon-bold:before                 { content: "\f032"; }
    .icon-italic:before               { content: "\f033"; }
    .icon-text-height:before          { content: "\f034"; }
    .icon-text-width:before           { content: "\f035"; }
    .icon-align-left:before           { content: "\f036"; }
    .icon-align-center:before         { content: "\f037"; }
    .icon-align-right:before          { content: "\f038"; }
    .icon-align-justify:before        { content: "\f039"; }
    .icon-list:before                 { content: "\f03a"; }
    .icon-indent-left:before          { content: "\f03b"; }
    .icon-indent-right:before         { content: "\f03c"; }
    .icon-facetime-video:before       { content: "\f03d"; }
    .icon-picture:before              { content: "\f03e"; }
    
    .icon-pencil:before               { content: "\f040"; }
    .icon-map-marker:before           { content: "\f041"; }
    .icon-adjust:before               { content: "\f042"; }
    .icon-tint:before                 { content: "\f043"; }
    .icon-edit:before                 { content: "\f044"; }
    .icon-share:before                { content: "\f045"; }
    .icon-check:before                { content: "\f046"; }
    .icon-move:before                 { content: "\f047"; }
    .icon-step-backward:before        { content: "\f048"; }
    .icon-fast-backward:before        { content: "\f049"; }
    .icon-backward:before             { content: "\f04a"; }
    .icon-play:before                 { content: "\f04b"; }
    .icon-pause:before                { content: "\f04c"; }
    .icon-stop:before                 { content: "\f04d"; }
    .icon-forward:before              { content: "\f04e"; }
    
    .icon-fast-forward:before         { content: "\f050"; }
    .icon-step-forward:before         { content: "\f051"; }
    .icon-eject:before                { content: "\f052"; }
    .icon-chevron-left:before         { content: "\f053"; }
    .icon-chevron-right:before        { content: "\f054"; }
    .icon-plus-sign:before            { content: "\f055"; }
    .icon-minus-sign:before           { content: "\f056"; }
    .icon-remove-sign:before          { content: "\f057"; }
    .icon-ok-sign:before              { content: "\f058"; }
    .icon-question-sign:before        { content: "\f059"; }
    .icon-info-sign:before            { content: "\f05a"; }
    .icon-screenshot:before           { content: "\f05b"; }
    .icon-remove-circle:before        { content: "\f05c"; }
    .icon-ok-circle:before            { content: "\f05d"; }
    .icon-ban-circle:before           { content: "\f05e"; }
    
    .icon-arrow-left:before           { content: "\f060"; }
    .icon-arrow-right:before          { content: "\f061"; }
    .icon-arrow-up:before             { content: "\f062"; }
    .icon-arrow-down:before           { content: "\f063"; }
    .icon-share-alt:before            { content: "\f064"; }
    .icon-resize-full:before          { content: "\f065"; }
    .icon-resize-small:before         { content: "\f066"; }
    .icon-plus:before                 { content: "\f067"; }
    .icon-minus:before                { content: "\f068"; }
    .icon-asterisk:before             { content: "\f069"; }
    .icon-exclamation-sign:before     { content: "\f06a"; }
    .icon-gift:before                 { content: "\f06b"; }
    .icon-leaf:before                 { content: "\f06c"; }
    .icon-fire:before                 { content: "\f06d"; }
    .icon-eye-open:before             { content: "\f06e"; }
    
    .icon-eye-close:before            { content: "\f070"; }
    .icon-warning-sign:before         { content: "\f071"; }
    .icon-plane:before                { content: "\f072"; }
    .icon-calendar:before             { content: "\f073"; }
    .icon-random:before               { content: "\f074"; }
    .icon-comment:before              { content: "\f075"; }
    .icon-magnet:before               { content: "\f076"; }
    .icon-chevron-up:before           { content: "\f077"; }
    .icon-chevron-down:before         { content: "\f078"; }
    .icon-retweet:before              { content: "\f079"; }
    .icon-shopping-cart:before        { content: "\f07a"; }
    .icon-folder-close:before         { content: "\f07b"; }
    .icon-folder-open:before          { content: "\f07c"; }
    .icon-resize-vertical:before      { content: "\f07d"; }
    .icon-resize-horizontal:before    { content: "\f07e"; }
    
    .icon-bar-chart:before            { content: "\f080"; }
    .icon-twitter-sign:before         { content: "\f081"; }
    .icon-facebook-sign:before        { content: "\f082"; }
    .icon-camera-retro:before         { content: "\f083"; }
    .icon-key:before                  { content: "\f084"; }
    .icon-cogs:before                 { content: "\f085"; }
    .icon-comments:before             { content: "\f086"; }
    .icon-thumbs-up:before            { content: "\f087"; }
    .icon-thumbs-down:before          { content: "\f088"; }
    .icon-star-half:before            { content: "\f089"; }
    .icon-heart-empty:before          { content: "\f08a"; }
    .icon-signout:before              { content: "\f08b"; }
    .icon-linkedin-sign:before        { content: "\f08c"; }
    .icon-pushpin:before              { content: "\f08d"; }
    .icon-external-link:before        { content: "\f08e"; }
    
    .icon-signin:before               { content: "\f090"; }
    .icon-trophy:before               { content: "\f091"; }
    .icon-github-sign:before          { content: "\f092"; }
    .icon-upload-alt:before           { content: "\f093"; }
    .icon-lemon:before                { content: "\f094"; }
    .icon-phone:before                { content: "\f095"; }
    .icon-check-empty:before          { content: "\f096"; }
    .icon-bookmark-empty:before       { content: "\f097"; }
    .icon-phone-sign:before           { content: "\f098"; }
    .icon-twitter:before              { content: "\f099"; }
    .icon-facebook:before             { content: "\f09a"; }
    .icon-github:before               { content: "\f09b"; }
    .icon-unlock:before               { content: "\f09c"; }
    .icon-credit-card:before          { content: "\f09d"; }
    .icon-rss:before                  { content: "\f09e"; }
    
    .icon-hdd:before                  { content: "\f0a0"; }
    .icon-bullhorn:before             { content: "\f0a1"; }
    .icon-bell:before                 { content: "\f0a2"; }
    .icon-certificate:before          { content: "\f0a3"; }
    .icon-hand-right:before           { content: "\f0a4"; }
    .icon-hand-left:before            { content: "\f0a5"; }
    .icon-hand-up:before              { content: "\f0a6"; }
    .icon-hand-down:before            { content: "\f0a7"; }
    .icon-circle-arrow-left:before    { content: "\f0a8"; }
    .icon-circle-arrow-right:before   { content: "\f0a9"; }
    .icon-circle-arrow-up:before      { content: "\f0aa"; }
    .icon-circle-arrow-down:before    { content: "\f0ab"; }
    .icon-globe:before                { content: "\f0ac"; }
    .icon-wrench:before               { content: "\f0ad"; }
    .icon-tasks:before                { content: "\f0ae"; }
    
    .icon-filter:before               { content: "\f0b0"; }
    .icon-briefcase:before            { content: "\f0b1"; }
    .icon-fullscreen:before           { content: "\f0b2"; }
    
    .icon-group:before                { content: "\f0c0"; }
    .icon-link:before                 { content: "\f0c1"; }
    .icon-cloud:before                { content: "\f0c2"; }
    .icon-beaker:before               { content: "\f0c3"; }
    .icon-cut:before                  { content: "\f0c4"; }
    .icon-copy:before                 { content: "\f0c5"; }
    .icon-paper-clip:before           { content: "\f0c6"; }
    .icon-save:before                 { content: "\f0c7"; }
    .icon-sign-blank:before           { content: "\f0c8"; }
    .icon-reorder:before              { content: "\f0c9"; }
    .icon-list-ul:before              { content: "\f0ca"; }
    .icon-list-ol:before              { content: "\f0cb"; }
    .icon-strikethrough:before        { content: "\f0cc"; }
    .icon-underline:before            { content: "\f0cd"; }
    .icon-table:before                { content: "\f0ce"; }
    
    .icon-magic:before                { content: "\f0d0"; }
    .icon-truck:before                { content: "\f0d1"; }
    .icon-pinterest:before            { content: "\f0d2"; }
    .icon-pinterest-sign:before       { content: "\f0d3"; }
    .icon-google-plus-sign:before     { content: "\f0d4"; }
    .icon-google-plus:before          { content: "\f0d5"; }
    .icon-money:before                { content: "\f0d6"; }
    .icon-caret-down:before           { content: "\f0d7"; }
    .icon-caret-up:before             { content: "\f0d8"; }
    .icon-caret-left:before           { content: "\f0d9"; }
    .icon-caret-right:before          { content: "\f0da"; }
    .icon-columns:before              { content: "\f0db"; }
    .icon-sort:before                 { content: "\f0dc"; }
    .icon-sort-down:before            { content: "\f0dd"; }
    .icon-sort-up:before              { content: "\f0de"; }
    
    .icon-envelope-alt:before         { content: "\f0e0"; }
    .icon-linkedin:before             { content: "\f0e1"; }
    .icon-undo:before                 { content: "\f0e2"; }
    .icon-legal:before                { content: "\f0e3"; }
    .icon-dashboard:before            { content: "\f0e4"; }
    .icon-comment-alt:before          { content: "\f0e5"; }
    .icon-comments-alt:before         { content: "\f0e6"; }
    .icon-bolt:before                 { content: "\f0e7"; }
    .icon-sitemap:before              { content: "\f0e8"; }
    .icon-umbrella:before             { content: "\f0e9"; }
    .icon-paste:before                { content: "\f0ea"; }
    
    .icon-user-md:before              { content: "\f200"; }
    
    wondertracker
    Participant

    I understand.. And I saw the file… Thank you ;-)

    but here what i put:

    [intro]
    [label]onebillionlove.com[/label] DUMMY TEXT
    [launch_button i class=”icon-camera-retro” text=”DUMMY TEXT” url=”DUMMY URL”]
    [/intro]

    or “\f0a7”

    and it doesn’t change the icon.. please tell me the exact syntax with the above example..

    Many thanks

    PS how do you format the codes… It doesn’t seem to work… the signs in the synatx above don’t show… sorry

    ahmetsali
    Keymaster

    You don’t need to change your shortcodes at all. Find your icon content code and paste your content code into the code below;

    .intro .launch-wrap:before { content: "\f0a7"; }
    

    And finally paste the code above to the “Appearance > Theme Options > Style > Custom CSS” box.

    wondertracker
    Participant

    ouf !

    got it !

    THANK YOU…. sağ olun :-)

    wondertracker
    Participant

    Sorry again, but what if I have another intro on another page and that I want another icon ? Would it be possible ?

    ahmetsali
    Keymaster

    It is possible, each page has it’s own body class. You can write a page specific custom css.

    wondertracker
    Participant

    thank you… I f I need I’ll ask you… But if you want to explain now..; Please do :-)

    All the best

    P.

    ahmetsali
    Keymaster

    Let’s say you want to add it to contact page, the custom css you need will be;

    .page-template-page-contact-php .intro .launch-wrap:before { content: "\f0a7"; }
    
    wondertracker
    Participant

    Thanks a lot !

    Best :-)

    daanvandenbergh
    Participant

    Could you update the list of available font awesome?

    Because they have released a bunch more of icons, including a better RSS-icon.

    daanvandenbergh
    Participant

    If you could check out my website: http://www.daanvandenbergh.com/poetry/1851/truth-hurts/

    You’ll notice that I created a sidebar widget, using the FontAwesome icons you provided. However, the rss icon (/f143) isn’t showing.

    I added it to the font-awesome.css stylesheet, but for some reason it still doesn’t show.

    What should I do?

    daanvandenbergh
    Participant

    Nevermind. I removed all fontawesome support from the theme and installed the WordPress-plugin, which is automatically updated. Seems like an easier approach.

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

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register