Add twitter bootstrap icon in button

流过昼夜 提交于 2019-12-24 05:49:54

问题


I have a bottom in twitter bootstrap but want to add a icon in the bottom. Is that possible ?

This is the button:

 <div class="col-md-6">{{ HTML::linkRoute('change_log', 'Endringslogg', array(), array('class' => 'btn btn-primary')) }}</div>

Icon I want to add:

<span class="glyphicon glyphicon-user"></span>

回答1:


You can create a macro to handle this

HTML::macro('button', function($route, $title, $parameters = array(), $attributes = array())
{
    $icon = array_get($attributes, 'icon');

    $iconTag = $icon ? '<span class="glyphicon glyphicon-'.$icon.'"></span> ' : '';

    if ($icon) unset($attributes['icon']);

    return HTML::linkRoute($route, $iconTag.$title, $parameters, $attributes);
});

Then in your blade template do something like:

 <div class="col-md-6">{{ HTML::button('change_log', 'Endringslogg', [], ['class' => 'btn btn-primary', 'icon' => 'user']) }}</div>



回答2:


You can create a helper which is not using HTML::linkRoute as this method encodes html entites so you would end up with this:

<a href="http://your.url">&lt;span class=&quot;glyphicon glyphicon-user&quot;&gt;&lt;/span&gt;</a>

And here's the helper

if ( ! function_exists('icon_link_to_route')) {
    /**
     * Create link to named route with glyphicon icon.
     * 
     * @param  string $icon
     * @param  string $route
     * @param  string $title
     * @param  array  $parameters
     * @param  array  $attributes
     * @return string
     */
    function icon_link_to_route($icon, $route, $title = null, $parameters = array(), $attributes = array())
    {
        $url = route($route, $parameters);

        $title = (is_null($title)) ? $url : e($title);

        $attributes = HTML::attributes($attributes);

        $title .= '<span class="glyphicon glyphicon-'.e($icon).'"></span>';

        return '<a href="'.$url.'"'.$attributes.'>'.$title.'</a>';
    }
}


来源:https://stackoverflow.com/questions/23322989/add-twitter-bootstrap-icon-in-button

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!