I'd like to use an Font Awesome icon in a submit button. I tried:
<?= $this->Form->submit('<i class="fa fa-save fa-2x"></i>', ['escape' => false]) ?>
But it doesn't work. How to do?
Using the code shown in the question you will end up with an HTML like this:
<div class="submit">
<input type="submit" value="<i class=" fa="" fa-save="" fa-2x"="">
</div>
This is not something you are looking for, so try using button instead of submit:
<?= $this->Form->button('<i class="fa fa-save fa-2x"></i>',
['escape' => false,'type' => 'submit']) ?>
See here : submit Vs button cakephp3, form helper
This answer comes 4 years later, but to use font awesome, or any icon syntax for the cake form submit helper, use the following syntax:
$caption = "<i class='fa fa-cloud-upload fa-2x'></i>" //defines the icon
$options = ['escape'=>true]; //defines the submit button options
echo $this->Form->button($caption,$options);
Related
In my Controller :
$this->Flash->success(__(' Your Data has been Saved Successfully. Sheets Name in this XLS file : <span style="color:#FF9900"> '.$SheetName.'</span>'));
In my success.ctp located in Element\Falsh :
<div class="alert alert-success fade in" onclick="this.classList.add('hidden')"> × <strong>Success!</strong> <?= h($message) ?> </div>
The Message is display like :
Now the question is how to use inline css in the flash message.
I think the soloution for your problem would be to use another layout for this type of message.
$this->Flash->set($message, $options[])
You can specify to use a specific element in the options. Something like this:
create a new confirmation.ctp inyour project:
<div class="[...]">
<?= h($message) ?>
<span style="color:#FF9900">
<?= h($params['sheetName']) ?>
</span>
</div>
now when you want to show the new confirmation use this code:
$this->Flash->set(__('The Message:'), [
'element' => 'confirmation,
'params' => [
'sheetName' => $SheetName
]
]);
This will display your custom flash element.
I have a form like this:
email
[input]
password
[input]
Login-Button
I want to eliminate the "email" and "password" text and put them inside the inputs like placeholder and also change the "login" text to "LOGIN".
This is my login ctp.
<fieldset style="background:#F44336">
<?= $this->Form->create() ?>
<?= $this->Form->input('email') ?>
<?= $this->Form->input('password') ?>
<?= $this->Form->button('Login') ?>
<?= $this->Form->end() ?>
<div class="forgot">
<p>Forgot Password?</p>
</div>
Your question is confusing and vague.
But I believe you are asking you dont want the value or words "Email" and "Password" to be next to the input but rather inside the input textbox?
If so, you can add HTML code inside the HTML form
<input type="email" name="email_form" placeholder="Email">
Keep in mind that is HTML 5.
In HTML 4, the traditional way would to be adding an attribute to the HTML form to email or password as value="Email..."
Above code is correct but you should use helpers.
So a better way to achieve the same task with Html helpers is:
<?= $this->Form->input('email', array('label' => false)); ?>
<?= $this->Form->input('password', array('label' => false)); ?>
It's a suggestion to make your code better which we all should focus on.
I have this JSFiddle that shows a user registration form. I am using Twitter Bootstrap. I have just realized that it shows fine when using Firefox.
However, when using Chrome or IE, the textfields are slightly above the input-group-addons where I have glyphicons.
How can I make the form inputs show correctly across browsers?
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-user"></span>
<?php
echo $this->Form->input('username', array('class' => 'form-control',
'placeholder' => 'Username', 'required' => 'required', 'type' => 'text'));
?>
</div>
Move the glyph class out and into their own spans.
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
Always try to keep elements separate from their containers to prevent styles from conflicting with each other.
I have this code:
<button type="submit" name="submit" class="btn green pull-right">
Potvrdi <i class="m-icon-swapright m-icon-white"></i>
</button>
How can I make Zend_Form_Element_Button with these attributes? (including tag, it is an icon that goes with the text "Potvrdi" as label on button)
I have done this so far:
$submit = new Zend_Form_Element_Button('submit');
$submit ->setLabel('Potvrdi')
->setAttrib('type', 'submit')
->setAttrib('class', 'btn green pull-right');
Thank you.
The quickest solution is to disable escaping for the label and include the HTML code directly in the label:
$submit = new Zend_Form_Element_Button('submit');
$submit ->setLabel('Potvrdi <i class="m-icon-swapright m-icon-white"></i>')
->setAttrib('type', 'submit')
->setAttrib('class', 'btn green pull-right')
->setAttrib('escape', false);
However, If you plan to use this type of button often in your source code, you should consider writing your own Zend_Form_Element (e.g. My_Form_Element_IconButton) that takes care of adding these tags.
Can someone help to rewrite this, from HTML to Laravel4?
</i></span> Home
The route name for that page is just '/'.
I know how to write simple link in Laravel:
{{ HTML::link('/','Home) }}
But how can I add the span class with the font-awesome icon?
I'd just put the link in the href.
<span><i class="icon-home"></i></span> Home
No need to generate all the rest through Laravel.
What #Dries suggests is simple and very straightforward, but you really want to have it done entirely via Laravel, I would suggest writing a HTML macro, especially if you want more complex html structures to be involved. For example, here is a macro for <a><img /></a> structure:
HTML::macro('image_link', function($url = '', $img='img/', $alt='', $param = false, $active=true, $ssl=false)
{
$url = $ssl==true ? URL::to_secure($url) : URL::to($url);
$img = HTML::image($img,$alt);
$link = $active==true ? HTML::link($url, '#', $param) : $img;
$link = str_replace('#',$img,$link);
return $link;
});
You could read more about it here: http://forums.laravel.io/viewtopic.php?pid=10467
{!! HTML::decode(link_to(URL::previous(),
'<i class="fa fa-chevron-left" aria-hidden="true"></i> Back',
['class' => 'btn btn-primary'])) !!}