I'm trying to use Font Awesome stacked images in a list as described in the example page http://fontawesome.io/examples/
List:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>
Stacked images:
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
I can't get images aligned correctly, as you can see in this fiddle:
https://jsfiddle.net/uqL4aLyj/
Does anyone know how to get it aligned correctly?
Thank you in advance
Max
This is happening because the .fa-stack class applies a height, width and line-height of 2em to the stacked set of icons. A quick way to ensure non-stacked icons are aligned with stacked icons is to treat your non-stacked icons as a one-icon stack themselves.
You can achieve this by changing your current markup of:
<li>
<i class="fa fa-camera-retro"></i>
text
</li>
To:
<li>
<span class="fa-stack">
<i class="fa fa-camera-retro fa-stack-1x"></i>
</span>
text
</li>
Modified JSFiddle demo.
The examples on the fontawesome page uses stacked images outside an ordered/unordered list. Separates them with a <br> tag.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
First item<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
Second item
Related
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
I want to add an instagram icon to the footer of my website.
I have created the circle and changed the colour, but I cant get the icon for Instagram to work.
This is what it looks like at the moment
Heres the code in the Static Block;
<a class="first" href="#" title="Join us on Facebook">
<span class="icon icon-hover i-facebook-w" style="background-color: #3b5998"></span>
</a>
<a href="#" title="Follow us on Instagram">
<span class="icon icon-hover i-instagram-w" style="background-color: #c13584"></span>
</a>
<a href="#" title="Youtube">
<span class="icon icon-hover i-youtube-w" style="background-color: #bb0000"></span>
</a>
<a href="http://twitter.com/infortis" title="Follow Infortis on Twitter">
<span class="icon icon-hover i-twitter-w" style="background-color: #00aced"></span>
</a>
<a href="#" title="Pinterest">
<span class="icon icon-hover i-pinterest-w" style="background-color: #cb2027"></span>
</a>
The Instagram icon code is;
.ic-instagram:before {
content: "\e22f";
}
I need some help on the backpack, the buttons.
I have a list of products, and in the edit and delete buttons I have added two more to the nutrient of a product and its price. Using the backpack I do not know how to load the id of the product in question to put this additional information. How can I do it?
Image
Inside the button view you created you should be able to use $entry. Check out https://laravel-backpack.readme.io/docs/crud-buttons for more info.
Even though this event happened more than 1 month, I'll try to share some information to help others.
1. First of all you need to create a new blade file
resources\views\vendor\backpack\buttons\crud\buttons.
2. Inside of your file
<i class='fa fa-list'></i>Listar Nutrientes
The $entry->getKey() is going to provide the "id" to you.
3. Connecting the "Button" to your CrudCrontroller
Inside your ProductCrudController you need to add a new entry.
$this->crud->addButtonFromView('line', 'extra_button', 'extra_button', 'beginning');
the extra_button "just a example" needs to have the name of your blade file in the third parameter "if i'm not wrong".
After this you should get your new button for each line listed in the table.
Just a tip: If you're going to add "a lot of buttons" try to use a
drop down button.
<div class="btn-group">
<button type="submit" class="btn btn-primary btn btn-xs btn-default">
<span class="fa fa-list" role="presentation" aria-hidden="true" style="color: #f1f1f1"></span>
<span data-value="save_and_back" style="color: #fff">Opções</span>
</button>
<button type="button" class="btn btn-primary dropdown-toggle btn-xs btn-default" data-toggle="dropdown" aria-haspopup="true" aira-expanded="false" aria-expanded="true">
<span class="caret"></span>
<span class="sr-only">▼</span>
</button><div class="dropdown-backdrop"></div>
<ul class="dropdown-menu" style="font-size: 12px;">
<li><i class='fa fa-plus'></i>Add new nutriente</li>
<li><i class='fa fa-list'></i>Listar nutrientes</li>
<li><i class='fa fa-arrow-right'></i>Second Action</li>
<li><i class='fa fa-times'></i>Cancel</li>
</ul>
</div>
I'm developing an app with Angular and Semantic-UI.
I have a dropdown menu like the following: https://plnkr.co/edit/BTCxfk
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I would like to have that users can click on a single item using tab and enter buttons.
As you can see they can only move towards menu items, but they can't trigger the click event.
Any idea?
I would give this item a tab-index of 0 since most elements like this aren't tabbable by default.
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text" tabindex="0" role="menu">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I added tab index of 0 and role of menu.
I want to click on + icon, which state name is having attribute as data-stateid=1,
But when I try to find web element using firepath.
All + icon is having the same attribute as class so, I'm not able to click on specific + icon.
HTML Code:
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#lob1" data-stateid="1">
<span class="tag tag-default tag-pill pull-xs-right">0</span>
<i class="fa fa-plus pull-xs-right btn-country-list" onclick="GetLobPopUp('AL','Alabama')"/>
</h4>
</div>
<div id="lob1" class="panel-collapse collapse in" style="height: auto;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#lob3" data-stateid="3">
<span class="tag tag-default tag-pill pull-xs-right">0</span>
<i class="fa fa-plus pull-xs-right btn-country-list" onclick="GetLobPopUp('AZ','Arizona')"/>
</h4>
</div>
<div id="lob3" class="panel-collapse collapse in" style="height: auto;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#lob4" data-stateid="4">
<span class="tag tag-default tag-pill pull-xs-right">0</span>
<i class="fa fa-plus pull-xs-right btn-country-list" onclick="GetLobPopUp('AR','Arkansas')"/>
</h4>
</div>
Can anyone help me on this issue?
Best Regards.
All you need to do is identify the element first with using different attributes.. if you can't use class, then use data-stateid:
//a[#data-stateid='1']/following-sibling::i
You can try this query:
//h4[./a[#data-stateid=1]]/i
(tested on http://xpather.com/9pCZr2I0)
The pasted HTML seems a bit malformed so I corrected it.