【问题标题】:Add twitter bootstrap icon in button在按钮中添加 twitter 引导图标
【发布时间】:2014-06-12 22:20:52
【问题描述】:

我在 twitter bootstrap 中有一个底部,但想在底部添加一个图标。这可能吗?

这是按钮:

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

我要添加的图标:

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

【问题讨论】:

    标签: twitter-bootstrap laravel laravel-4 blade


    【解决方案1】:

    您可以创建一个不使用 HTML::linkRoute 的助手,因为此方法对 html 实体进行编码,因此您最终会得到:

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

    这是帮手

    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>';
        }
    }
    

    【讨论】:

      【解决方案2】:

      你可以创建一个宏来处理这个

      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);
      });
      

      然后在您的刀片模板中执行以下操作:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-05-28
        • 2012-03-11
        • 2012-05-15
        • 1970-01-01
        • 1970-01-01
        • 2016-02-10
        • 2012-08-22
        • 2012-05-26
        相关资源
        最近更新 更多