Positioning icons

[James_DG]

For my mobile website builder I would like to change the positioning of my icons. Basically meaning that every navigation button comes with a page title and an icon I can select. Currently the icons are displayed on the left side of the page titles, while I would like them positioned on the right side.

Original code

if($page->buttonicon){
    $icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative;    top:33px\">";
}
else{
    $icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";

I've played around with it a bit leading to some change, but although I'm getting there - I'm missing something I can't seem to get solved.

Current outcome and desired outcome

[ATTACH]4991[/ATTACH]

Edited code

<?php
if($page->buttonicon){
    $icon = '<img src="icons/'.$page->buttonicon.'" style="float:right;margin-top:33px">';
}
else{
    $icon = '<img src="images/noicon.png" style="float:right;margin-top:33px">';
}
$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'">'.$icon.'<a class="'.$bs.'" href="'.trim($page->url).'" style="float:left;" '.$target.'>'.$page->title.'</a></li>';
?>

Outcome edited code

[ATTACH]4993[/ATTACH]

Looks like I'm getting there. Can someone help me out with the correct code? 😕
I'm just a beginner so any help is more than welcome! Many thanks in advance! 😃

icon-positioning.png icon-positioning-updated2.0.png

[dalecosp]

Start by reversing the position of the elements (assuming I even understand what you're asking for...

$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'"><a class="'.$bs.'" href="'.trim($page->url).'" style="float:left;" '.$target.'>'.$page->title.'<span style="position:relative;padding-left:80px;">'.$icon.'</span></a></li>'; 

James_DG wrote:

mobile website builder

just a beginner

Perhaps you should start with something simple--- say, a simple form and handler, or a basic image gallery, or a government health insurance portal? 🙂

[sneakyimp]

Perhaps you should try specifying the image not as an <img> tag but as a background-image for the button elements?

[Weedpacket]

Since it appears you don't want the icons to behave as links, you could also try adding a "list-style-image" style to each <li> element.