section page-title problem

i am using this code

<section id="page-title">

		<div class="container clearfix">
			<h1>Page Title</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>

i want add buttons, Change this

			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>

for

<a href=" " class="button button-border button-rounded button-red"><i class="icon-line-cloud-upload"></i>Test</a>
<a href=" " class="button button-border button-rounded button-red"><i class="icon-line-cloud-upload"></i>Test</a>
<a href=" " class="button button-border button-rounded button-red"><i class="icon-line-cloud-upload"></i>Test</a>

but it does not look correctly. how can i add buttons in page-title section and align it right . (i didn't need breadcrumb)

One of the way I fix this is like this

			<ol class="breadcrumb">
				<li><a href=" " class="button button-border button-rounded button-red"><i class="icon-line-cloud-upload"></i>Test</a></li>
				<li><a href=" " class="button button-border button-rounded button-red"><i class="icon-line-cloud-upload"></i>Test</a></li>
			</ol>

but between buttons there is symbol /

I understand that Buttons are currently not supported in the Page Title area, but i am using it like this: Can I use like this?

            <ol class="breadcrumb">
                <li><a href=" " class="button button-border button-rounded button-red"><i class="icon-line-cloud-upload"></i>Test</a></li>
                <li><a href=" " class="button button-border button-rounded button-red"><i class="icon-line-cloud-upload"></i>Test</a></li>
            </ol>

Can I use like this?