I am using React.js to make a portfolio website. I decided to go with Font Awesome icons since I love the look of them. However when I go to import any icon that has that dash in the name, I can't figure out how to import it. Here's my code so far (for importing):
import "font-awesome/css/font-awesome.min.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// All these are single name icons
import {faPython} from "#fortawesome/free-brands-svg-icons/faPython";
import {faJs} from "#fortawesome/free-brands-svg-icons/faJs";
import {faReact} from "#fortawesome/free-brands-svg-icons/faReact";
import {faCuttlefish} from "#fortawesome/free-brands-svg-icons/faCuttlefish";
// This one is named "rectangle-code"
import {faRectangleCode} from "#fortawesome/free-solid-svg-icons/faRectangleCode";
I get this error:
I can't import it using dashes in the name, so how do I import this icon without any errors?
EDIT: Click here to view the icon on Font Awesome's website
Here's the problem!
You're attempting to use a pro icon - it doesn't exist in the free icon packs.
(Edit: for future reference, a good way to debug import problems like this is to cd inside the #fortawesome directory in your terminal, and then use something like https://github.com/junegunn/fzf to look for the file you're looking for. That's what I did before realizing the icon doesn't exist in the free version.)
Related
I am trying to visualize high resolution *.tif images using streamlit. I tried using both a url to the image and the downloaded image. All I get is a "0" similar to a st.write("0").
What I tried to do:
import streamlit as st
st.image("http://www.bmsc.washington.edu/raster3d/examples/density.tiff")
You can use the pillow library.
import streamlit as st
from PIL import Image
fn = 'f:/downloads/density.tiff'
image = Image.open(fn)
st.image(image)
Output
how can I download the image from this URL: https://thispersondoesnotexist.com/
I know it hasn't some image-url but I hope to get some images from there.
My idea is to write a code to get more images from this URL.
Duplicate: Loop through webpages and download all images
Python 2
Using urllib.urlretrieve
import urllib
urllib.urlretrieve("http://www.gunnerkrigg.com//comics/00000001.jpg", "00000001.jpg")
Python 3
Using urllib.request.urlretrieve (part of Python 3's legacy interface, works exactly the same)
import urllib.request
urllib.request.urlretrieve("http://www.gunnerkrigg.com//comics/00000001.jpg", "00000001.jpg")
I am writing a Server Side Rendered app with Svelte/Sapper and I am having trouble using Font Awesome fonts.
I am using the following to load the font:
<script>
import Icon from "svelte-awesome";
import { faTimes } from "#fortawesome/free-solid-svg-icons/faTimes";
</script>
<Icon data={faTimes} />
The error I am seeing is:
" is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules"
Is there a solution to this?
I landed on this page looking for ways to import just the FontAwesome CSS into Svelte without any additional components or dependencies. Turns out that with Svelte this is just as simple as with plain HTML: Get the FontAwesome CSS (e.g. via package manager, CDN, or download) and add it to the HTML <head> section.
I like to install it via npm to maintain its version together with all other depencies:
npm install --save #fortawesome/fontawesome-free
After installing, just add the stylesheet (from the #fortawesome directory inside node_modules) to the <head> section of app.html.
<head>
...
<link href="./../node_modules/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
...
</head>
Use FontAwesome icons in your Svelte components, e.g. <i class="fa-regular fa-lightbulb">
For svelete-aweome, the import should look as follows in Sapper:
import Icon from 'svelte-awesome/components/Icon';
I am trying to find the donation button on the website of
The University of British Columbia.
The donation button is located at the page footer, within the div classed as "span7"
However, when scraped, the html yeilded the div with nothing inside it.
My program works perfectly with direct div as source:
from bs4 import BeautifulSoup as bs
import re
site = '''<div class="span7" id="ubc7-footer-menu"><div class="row-fluid"><div class="span6"><h3>About UBC</h3><div>Contact UBC</div><div>About the University</div><div>News</div><div>Events</div><div>Careers</div><div>Make a Gift</div><div>Search UBC.ca</div></div><div class="span6"><h3>UBC Campuses</h3><div>Vancouver Campus</div><div>Okanagan Campus</div><h4>UBC Sites</h4><div>Robson Square</div><div>Centre for Digital Media</div><div>Faculty of Medicine Across BC</div><div>Asia Pacific Regional Office</div></div></div></'''
html = bs(site, 'html.parser')
link = html.find('a', string=re.compile('(?)(donate|donation|gift)'))
#returns proper donation URL
However, using the site does not work
from bs4 import BeautifulSoup as bs
import requests
import re
site = requests.get('https://www.ubc.ca/')
html = bs(site.content, 'html.parser')
link = html.find('a', string=re.compile('(?i)(donate|donation|gift)'))
#returns none
Is there something wrong with my parser? Is it some-sort of anti-scrape maneuver? Am I doomed?
I cannot seem to find the 'Donate' button on the URL that you provided, but there is nothing inherently wrong with your parser, its just that the GET request that you send only gives you the HTML initially returned from the response, rather than waiting for the page to fully render.
It appears that parts of the page are filled in by Javascript. You can use Splash, which is used to render Javascript-based pages. You can run Splash in Docker quite easily, and just make HTTP requests to the Splash container which will return HTML that looks just like the webpage as rendered in a web browser.
Although this sounds overly complicated, it is actually quite simple to set up since you don't need to modify the Docker image at all, and you need no previous knowledge of Docker to get it to work. It requires just a single line from the command line to start a local Splash server:
docker run -p 8050:8050 -p 5023:5023 scrapinghub/splash
You then just modify any existing requests you have in your Python code to route to splash instead:
i.e. http://example.com/ becomes
http://localhost:8050/render.html?url=http://example.com/
EDIT: I found the problem. I was using ng2-boostrap tabset module,
when adding the maps inside this view, the map does not render. I
haven't been able to fix the problem though.
I'm working on an angular 2 application, where i need to import google maps module into a sub module. My question is - how might i do that correctly? is this even possible as it is.
What i've tried:
I have added the import { AgmCoreModule } from 'angular2-google-maps/core'; and AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) where xxx is my apiKey downloaded from google api site. If i run this code in a newly angular-cli created app - loading the module into app.module, everything works fine. Selector code looks:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
However, i want to use it in a module called MapModule and import that module into my app.module, so i import the AgmCoreModule into the MapModule, without forRoot(), and the selector is recognized in the html and the map is loaded but the map shows an empty view - i.e. there is a map with google logo and stuff, but no content - no error messages. I use the exact same code as my test example.
I also tried adding the AgmCoreModule with the forRoot({apiKey: 'xxx'}) with the same result. I removed the import from the App.module and only imported into the MapModule with the same result.
Am i missing something here? i can provide more code if needed, but i think my problem lies with the lack of knowledge in imports.
Kind regards Chris
Did you tried putting this code in your component that is responsible for viewing the map?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
#ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
if the map is not rendered in initial view, eg. inside an *ngif block then issues arise. When you inspect the elements in the tabs do you see map code or you see map code only when the map tab is activated?
Normally when there are no errors, a triggerResize() will fix your issue.