Icons are replaced by animating ? &? - asp.net-mvc-5
Setup: Asp.Net Mvc 5 + Bootstrap 3 + FontAwesome 5 Pro JS+SVG all.js (no shims)
Code/layout.cshtml:
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- Add local styles, mostly for plugins css file -->
#if (IsSectionDefined("Styles"))
{
#RenderSection("Styles", required: false)
}
<!-- Primary Inspinia style -->
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/plugins/kendo/css")
<!-- Section for main scripts render -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/kendo")
<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" data-auto-replace-svg="nest"></script>
#*<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" ></script>*#
</head>
So, I'm not doing bundling because I understood that the attribute data-auto-replace-svg="nest" needs to be added. I have tried with and without the attribute. I also managed to convert all of the icons from FA4 to FA5 and am no longer using shims. I have verified my bundles as well for any possible creep of FA4.
Usage:
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="#Html.IsSelected(controller: "Dashboards")">
<i class="far fa-th-large fa-fw"></i><span class="nav-label" data-i18n="nav.dashboard">Dashboards</span> <span class="far fa-angle-down arrow"></span>
<ul class="nav nav-second-level collapse #Html.IsSelected(controller: "Dashboards", cssClass: "in")">
<li class="#Html.IsSelected(action: "Primary")"><i class="far fa-tachometer-alt fa-fw"></i>Dashboard</li>
</ul>
</li>
<li class="#Html.IsSelected(controller: "Bill")">
<i class="far fa-archive fa-fw"></i><span class="nav-label" data-i18n="nav.bills">Bills</span><span class="far fa-angle-down arrow"></span>
<ul class="nav nav-second-level collapse #Html.IsSelected(controller: "Bill", cssClass: "in")">
<li class="#Html.IsSelected(action: "Search")"><i class="far fa-search fa-fw"></i>Search</li>
<li class="#Html.IsSelected(action: "GenerateBillAmin")"><i class="far fa-file-invoice fa-fw"></i>Receipt (Amin)</li>
<li class="#Html.IsSelected(action: "GenerateBill")"><i class="far fa-file-invoice fa-fw"></i>Receipt (Regular)</li>
</ul>
</li>
</ul>
</div>
</nav>
Bundles/CSS:
// CSS style (bootstrap/inspinia)
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/animate.min.css",
"~/Content/style.css" ));
// CSS style (kendo)
bundles.Add(new StyleBundle("~/Content/plugins/kendo/css").Include(
"~/Content/plugins/kendo/kendo.common-material.min.css",
"~/Content/plugins/kendo/kendo.material.min.css"));
Bundles/JS:
// jQuery
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-3.3.1.min.js"));
// Bootstrap
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.min.js"));
// Kendo UI Scripts
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/plugins/kendo/kendo.all.min.js",
"~/Scripts/plugins/kendo/kendo.aspnetmvc.min.js",
"~/Scripts/plugins/kendo/jszip.min.js"));
Final rendered icon:
<li class="">
<a href="/focus-web/Deposit/Search">
<svg class="svg-inline--fa fa-search fa-w-16 fa-fw" aria-hidden="true" data-prefix="far" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<g>
<path fill="currentColor" d="M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z"/>
<circle fill="currentColor" cx="256" cy="364" r="26.4191">
<animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="r" values="28;14;28;28;14;28;"/>
<animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;1;1;0;1;"/>
</circle>
<path fill="currentColor" opacity="1" d="M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z">
<animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;0;0;0;1;"/>
</path>
<path fill="currentColor" opacity="0" d="M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z">
<animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="0;0;1;1;0;0;"/>
</path>
</g>
</svg>
<!-- <i class="far fa-search fa-fw"></i> -->Search</a>
</li>
Rant-Repeat:
When I switched from FA4 to FA5 with CSS+Shims, everything worked so well that I had to go with the latest JS+SVG+Shims. I did an it worked. Then I fell in love with the far icons. I found traces of all fa* (FA4) and converted them to FA5 and got rid of the shim file. I donot know what happened then. The icons never worked after that and I'm not willing to go back from JS+SVG
I asked a similar question on GitHub for FA and immediately was told that one of the icons was from the PRO package only which made me realize I'm loading the free js file and not the custom personal Pro one. Issue resolved once I generated a new CDN link against my credentials.
Related
Why is the bootstrap carousel component not working properly in Liferay?
I created a new fragment, and in it, I copy-pasted the standard Bootstrap carousel component code, both css and javascript. The CSS works well, and the fragment looks like the normal carousel, but when I click on a slide, there is a blank white page between each slide. I tried using the CDN link instead, and it's the same. Here's my code: <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script> <div id="carouselExampleIndicators" class="carousel slide pointer-event" data-bs-ride="true"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" class=""></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" class="active" aria-current="true"></button> </div> <div class="carousel-inner"> <div class="carousel-item"> <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg> </div> <div class="carousel-item"> <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg> </div> <div class="carousel-item active"> <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> And this is what I am seeing: This doesn't happen on any other working environment, so therefore it must be a Liferay issue. I am inserting the custom fragment inside a page, and then just 'viewing' it. Why is this happening?
If I'm not mistaken, Liferay 7.4 includes Bootstrap 4. You're pulling in your own carousel and I'm quite certain that this mismatch causes issues.
How to Default my Accordion Menu to Closed State
Good day all, I am looking for some assistance in how to set this accordion menu to default state closed (collapsed). <div class="faqs border-top" data-js-accordion="all"> <h2 class="faqs__head h5 d-flex align-items-center py-10 mb-0 cursor-pointer open" data-js- accordion-button=""> <span class="mr-15">Our Aim</span> <i class="faqs__cross ml-auto"> <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-189" viewbox="0 0 24 24"> <g> <path d="M7.718,15.966c-0.117-0.13-0.176-0.279-0.176-0.449c0-0.169,0.059-0.318,0.176-0.449l3.32-3.301l-3.32-3.301 c-0.117-0.13-0.176-0.279-0.176-0.449c0-0.169,0.059-0.318,0.176-0.449c0.13- 0.117,0.279-0.176,0.449-0.176 c0.169,0,0.318,0.059,0.449,0.176l3.301,3.32l3.301-3.32c0.13-0.117,0.279-0.176,0.449-0.176c0.169,0,0.318,0.059,0.449,0.176 c0.117,0.131,0.176,0.28,0.176,0.449c0,0.17-0.059,0.319-0.176,0.449l-3.32,3.301l3.32,3.301c0.117,0.131,0.176,0.28,0.176,0.449 c0,0.17-0.059,0.319-0.176,0.449c-0.065,0.053-0.137,0.095-0.215,0.127c-0.078,0.033-0.156,0.049-0.234,0.049 s-0.156-0.016-0.234-0.049c-0.078-0.032-0.15-0.074-0.215-0.127l-3.301-3.32l-3.301,3.32c-0.065,0.053-0.137,0.095-0.215,0.127 c-0.078,0.033-0.156,0.049-0.234,0.049s-0.156-0.016-0.234- 0.049C7.854,16.061,7.782,16.019,7.718,15.966z"></path> </g> </svg> </i> </h2> <div data-js-accordion-content=""> <div class="rte pt-10 pb-30"> <ul class="list-lg mb-0"> <li>Our aim is to Lorem Epsom</li> </ul> </div> </div> </div> I have searched and tried to inject code from a few sources to no avail.
how to reduce the svg path in web page
I want to reduce the size of search icon in web page (which is a facelets file). Can anyone suggest how it can be possible. my current code of jsf is <div> <a href="search.html" class="nav-item toggler collapsed" data-toggle="collapse" data-target="#advancesearch" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <svg version="1.1" id="_x39_ac692fd-fab4-4127-97e6-094d15a4d3bc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> <path class="st0" d="M509.9,643.5L354.8,488.4c26.4-28,42.4-65.5,42.4-106.7c0-86.4-70.4-156.7-156.7-156.7S83.7,295.4,83.7,381.7 s70.4,156.8,156.8,156.8c41.2,0,78.6-16,106.7-41.8l155.1,155.1c1.1,1.1,2.8,1.6,3.9,1.6s2.8-0.5,3.9-1.6 C512.1,649,512.1,645.7,509.9,643.5z M94.7,381.7c0-80.3,65.5-145.7,145.8-145.7s145.7,65.5,145.7,145.7s-65.5,145.8-145.7,145.8 C160.1,527.5,94.7,462,94.7,381.7z"></path> </svg> <p>Advance search</p> </a> </div>
You can use CSS to select and style the <svg> element just as you would any other element in an HTML document.
In this situation you might use the following (attribute) selector:
a[href="search.html"] svg {
width: 100px;
height: 100px;
}
Working Example:
a[href="search.html"] svg {
width: 100px;
height: 100px;
}
<div>
<a href="search.html" class="nav-item toggler collapsed" data-toggle="collapse" data-target="#advancesearch" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 595.3 841.9">
<path d="M509.9,643.5L354.8,488.4c26.4-28,42.4-65.5,42.4-106.7c0-86.4-70.4-156.7-156.7-156.7S83.7,295.4,83.7,381.7 s70.4,156.8,156.8,156.8c41.2,0,78.6-16,106.7-41.8l155.1,155.1c1.1,1.1,2.8,1.6,3.9,1.6s2.8-0.5,3.9-1.6 C512.1,649,512.1,645.7,509.9,643.5z M94.7,381.7c0-80.3,65.5-145.7,145.8-145.7s145.7,65.5,145.7,145.7s-65.5,145.8-145.7,145.8 C160.1,527.5,94.7,462,94.7,381.7z"></path>
</svg>
<p>Advance search</p>
</a>
</div>
scraping href from div tag with beautiful soup
I have a page source with div tags like the example page source below. I would like to scrape all the urls like the example below and save them in a list.
Example url:
/model-airplane-kits-s/2379.htm
from:
<a data-control-id="aP52Q/QyTbqArQOpbKv4EQ==" data-control-name="A_jobssearch_job_result_click" href="/model-airplane-kits-s/2379.htm" id="ember1513" class="job-card-search__link-wrapper js-focusable-card disabled ember-view">
I’ve tried using the code below to scrape the urls from the href. I’m trying to use the span class to filter for only div tags that contain the job-card-search__easy-airplane. The code doesn’t return any urls, just an empty list. I’m new to beautifulsoup and selenium. If anyone could please point out what my issue is and suggest a solution I would be greatful. Especially if you could also give some explanation, like how I need to search the tree structure of the html.
Code:
soup = BeautifulSoup(driver.page_source)
tags = soup.find_all('a', {'class': 'job-card-search__easy-airplane', 'href': True})
urls = [t['href'] for t in tags]
page source:
<div data-control-name="A_jobssearch_job_result_click" data-job-id="urn:li:fs_normalized_jobPosting:1175863492" tabindex="0" role="button" id="ember1507" class="job-card-search--two-pane jobs-search-results__list--card--viewport-tracking-1 job-card-search job-card-search--column job-card-search job-card-search--clickable job-card-search--outline-default ember-view"><artdeco-entity-lockup size="4" id="ember1508" class="artdeco-entity-lockup--size-4 artdeco-entity-lockup ember-view"><figure id="ember1509" class="artdeco-entity-lockup__image artdeco-entity-lockup__image--type-square ember-view" type="square"><a data-control-id="aP52Q/QyTbqArQOpbKv4EQ==" data-control-name="A_jobssearch_job_result_click" tabindex="-1" href="/jobs/view/1175863492/?eBP=CwEAAAFqIxiBlPhCqFcaiXqaLT8ZCYXTIftwHuk7g59oqTz7fLS2Usfj45gbPf53raGy8aX-F7FvqLIf3MJgOTHo3Ugkxh6sCVhZlkZRMQH3gDk8lSE_wujH7Mz9tU8Upy0ZIWHS9wbUErl6g8Z8C2-z1YCW85y0eMG57HHPJnWYYbtoCS9Wh_NGgMmlglzGytFLwYgXEu56gDUcWhRkT_AHODGr3-ZLjO6FcpctLngpJnHm4r2dmo9F8AUfP3HYWjOK-pToyQlStkfh0IcKMce2jIuCxe3Wgc90v7HF7kEItq-WdL1IdbnHbvN9gPBrSubLfU_pPqmwGRoTmMlPygTbXERDrw4&recommendedFlavor=SCHOOL_RECRUIT&refId=fd370713-e20e-4b02-9676-9009d8e52d34&trk=d_flagship3_search_srp_jobs" id="ember1510" class="job-card-search__link-wrapper js-focusable-card disabled ember-view"> <img class="lazy-image loaded job-card-search__logo-image" title="Ancestry" alt="Ancestry logo" height="64" width="64" src="https://media.licdn.com/dms/image/C560BAQFzwmebdgodyw/company-logo_100_100/0?e=1563408000&v=beta&t=Xr94FzOXIsd2wULd8cHG7Lr8nppKm0wWGCph-_N4YMk">
</a>
</figure>
<artdeco-entity-lockup-content id="ember1511" class="job-card-search__content-wrapper artdeco-entity-lockup__content ember-view"><h3 id="ember1512" class="job-card-search__title artdeco-entity-lockup__title ember-view"><a data-control-id="aP52Q/QyTbqArQOpbKv4EQ==" data-control-name="A_jobssearch_job_result_click" href="/model-airplane-kits-s/2379.htm" id="ember1513" class="job-card-search__link-wrapper js-focusable-card disabled ember-view"> Data Scientist - Search
<span class="job-card-search__promoted-tag-separator"> </span><span class="job-card-search__promoted-tag">Promoted</span>
</a>
</h3>
<h4 id="ember1514" class="job-card-search__company-name t-14 t-black artdeco-entity-lockup__subtitle ember-view"><a data-control-id="aP52Q/QyTbqArQOpbKv4EQ==" data-control-name="job_card_company_link" href="/company/397181/" id="ember1515" class="job-card-search__company-name-link ember-view"> Ancestry
</a></h4>
<h5 id="ember1516" class="job-card-search__location artdeco-entity-lockup__caption ember-view"><!---->
<li-icon aria-hidden="true" type="map-marker-icon" class="job-card-search__exact-location-icon" size="small"><svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"><path d="M8,4a2,2,0,1,0,2,2A2,2,0,0,0,8,4ZM8,7.13A1.13,1.13,0,1,1,9.13,6,1.13,1.13,0,0,1,8,7.13ZM8,1A5,5,0,0,0,3,6a5.37,5.37,0,0,0,.41,2S5.91,13,7.22,15.52A0.86,0.86,0,0,0,8,16H8a0.86,0.86,0,0,0,.78-0.48C10.09,13,12.59,8,12.59,8A5.37,5.37,0,0,0,13,6,5,5,0,0,0,8,1Zm2.88,6.24L8,12.92,5.12,7.24A3.49,3.49,0,0,1,4.88,6a3.13,3.13,0,0,1,6.25,0A3.49,3.49,0,0,1,10.88,7.24Z" class="small-icon" style="fill-opacity: 1"></path></svg></li-icon>
San Francisco, CA, US
</h5>
<!----></artdeco-entity-lockup-content>
</artdeco-entity-lockup>
<!---->
<div class="job-card-search__body">
<p class="job-card-search__description-snippet">
Combining the rich information in family trees and historical records with the genetic details revea...
<span class="job-card-search__source-domain">jobs.smartrecruiters.com</span>
</p>
<div class="job-card-search__job-flavors-container job-flavors">
<div id="ember1517" class="job-flavors__flavor job-flavors__flavor--school-recruit ember-view"><a data-control-name="jobdetails_sharedconnections" href="/search/results/people/?facetCurrentCompany=397181&facetSchool=17816&origin=JOB_PAGE_CANNED_SEARCH" id="ember1518" class="search-s-shared-connections__link job-flavors__link link-without-visited-state ember-view"> <div class="job-flavors__logo-container">
<img class="lazy-image loaded job-flavors__logo-image" title="California Polytechnic State University-San Luis Obispo" alt="California Polytechnic State University-San Luis Obispo" src="https://media.licdn.com/dms/image/C560BAQERJB5dSuJ9Ow/company-logo_100_100/0?e=1563408000&v=beta&t=qIVll2vKhp3fUGa1FYyqjduYZkuuo-ApJ-Jiur-j1sY">
</div>
<div class="job-flavors__label">
5 alumni work here
</div>
</a></div>
</div>
<!---->
<ul class="job-card-search__footer mt1 t-12 t-black--light list-style-none">
<li class="job-card-search__footer-item">
<time class="job-card-search__time-badge job-card-search__time-badge--new" datetime="2019-04-15">
6 hours ago
</time>
</li>
<li class="job-card-search__footer-item">
<span class="job-card-search__easy-airplane">
<li-icon aria-hidden="true" type="linkedin-inbug-color-icon" class="mr1" size="small"><svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"><g class="small-icon" style="fill-opacity: 1">
<path d="M13.75,1H2.25A1.25,1.25,0,0,0,1,2.25v11.5A1.25,1.25,0,0,0,2.25,15h11.5A1.25,1.25,0,0,0,15,13.75V2.25A1.25,1.25,0,0,0,13.75,1Z" style="fill: #0073b1"></path>
<path d="M4,2.68A1.36,1.36,0,0,0,2.69,4,1.36,1.36,0,0,0,4,5.31,1.36,1.36,0,0,0,5.31,4,1.36,1.36,0,0,0,4,2.68Z" style="fill: #fff"></path>
<rect x="3" y="6" width="2" height="7" style="fill: #fff"></rect>
<path d="M10.25,5.88a3,3,0,0,0-2.31,1H7.88V6H6v7H8V10c0-1.17.48-2,1.62-2,.91,0,1.38.66,1.38,2v3h2V8.88C13,7,12.21,5.88,10.25,5.88Z" style="fill: #fff"></path>
</g></svg></li-icon>
Easy airplane
</span>
</li>
</ul>
</div>
</div>
Seeing more html would help but for the top html you could filter on class of a tag perhaps? You are trying to apply class name of target span to an a tag btw. The span with that class in the bottom html does not have a child a tag.
job-card-search__link-wrapper
I note, however, that the element does not appear in your longer html segment at the bottom.
For the top version:
links = [item['href'] for item in soup.select('a.job-card-search__link-wrapper')]
Top and bottom html provided a tags do have a shared attribute you might use
[data-control-name]
Sizing of svg element using elements with negative coordinates
When I create an svg element that contains objects with negative coordinates as shown in this jfiddle: http://jsfiddle.net/QGq3H/1/ <div class="row"> <div class="col-sm-6"> <div style="display:inline-block; height:100px;"></div> </div> </div> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-10"> <svg class="svg-element" xmlns="http://www.w3.org/2000/svg" width="100" version="1.1" height="60"> <rect fill-opacity="0" style="fill-opacity: 0;" stroke="none" fill="#000000" ry="0" rx="0" r="0" height="60" width="100" y="0" x="0"></rect> <circle cy="-50" cx="-50" style="" stroke="none" fill="#000000" r="10"></circle> </svg> </div> </div> In Chrome and IE the svg element has the same size as the visible part, in Firefox the svg is actually larger than the visible part. This is a problem when I want to get mouse coordinates relative to the svg element. Which browser is correct? Is there a good workaround?