font-awesome-5

How to use correctly fontawesome in select

由 空扰寡人 提交于 2019-12-20 04:59:16
问题 I'm trying to show the fontawesome icons in a select, but in the drop-down list the icons are not previewed well .FontAwesomeSelect { font-family: Font Awesome\ 5 Free; font-size: 18px; } <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/> <select name="sample" id="sample" class="FontAwesomeSelect"> <option value="">----</option> <option value="fa fa-address-card"></option> <option value="fa fa-bell"></option> <option value="fa fa-bookmark"></option>

fontawesome 5 font-family not work

由 一曲冷凌霜 提交于 2019-12-18 10:03:03
问题 I integrated fontawesome 5 in a project with bootstrap 4. When I recall a font via css it does not work. with fontawesome 4 the code was as follows: #mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after { float: right; content: '\f107'; font-family: 'FontAwesome'; } I tried to change the font name but it does not work font-family: 'Font Awesome 5 Free' 回答1: Your Unicode is wrong f107 a::after { content: "\f007"; font-family: 'Font Awesome\ 5 Free'; } <link href="https://use

Font awesome 5 on pseudo elements

由 谁说我不能喝 提交于 2019-12-17 17:29:06
问题 In font awesome 4 you could easily apply an icon to a :before/:after element using CSS. Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using

I can't get my font-awesome icons to show up. Tried importing css with multiple methods. Using html template

由 ⅰ亾dé卋堺 提交于 2019-12-17 10:02:04
问题 I'm building a website portfolio using a HTML template. I don't have too much experience with css, but after importing the font-awesome css file both as a link and file in my django project, the icons are showing up as little boxes. I know the css file is being recognized because when I comment it out the boxes go away. I think there may be something deeper going on with the css that I don't understand. I suspect there's something going on in the main css file if someone could help me out.

Font Awesome 5 shows empty square when using the JS+SVG version

由 一个人想着一个人 提交于 2019-12-16 20:26:50
问题 Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square: ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: "Font Awesome 5 Free"; content: "\f058"; margin: 0 5px 0 -15px; color: #004d00; display: inline-block; } <script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script> <ul> <li class="testitems">List Item 1</li> <li class="testitems">List Item 2</li> <li class="testitems"

Font Awesome 5 shows empty square when using the JS+SVG version

由 こ雲淡風輕ζ 提交于 2019-12-16 20:26:23
问题 Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square: ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: "Font Awesome 5 Free"; content: "\f058"; margin: 0 5px 0 -15px; color: #004d00; display: inline-block; } <script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script> <ul> <li class="testitems">List Item 1</li> <li class="testitems">List Item 2</li> <li class="testitems"

Font Awesome 5 on pseudo elements shows square instead of icon

由 淺唱寂寞╮ 提交于 2019-12-16 19:50:21
问题 I am trying to change the content of a span with a Font Awesome icon directly from the CSS page but can't seem to make it work properly. 1) I have imported FA from the documentation and in the <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> 2) My html looks like this : <span class='myClass'>Movies</span> 3) Let's now say I would like to

How to avoid ligatures within option-tag?

由 蹲街弑〆低调 提交于 2019-12-13 03:26:39
问题 I'd like to create a visually appealing select-dialog that shows FontAwesome-Icons and a word describing the symbol to select from various scales for statistical data. So I'm using the FontAwesome-Fonts for the select -tag and the unicode-glyphs for the various symbols. That first part works nicely. But the words I am using are also used in FonAwesome to form ligatures that can also be used to get the icons (I thought this was limited to the desktop-version, but as my example prooves, it also

Include @fortawesome/fontawesome to angular-cli project

由 扶醉桌前 提交于 2019-12-12 07:26:15
问题 I'm trying to include font awesome 5 to my angular-cli project (1.6.0) running Angular >5.0.0. I used (as described): yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx yarn add @fortawesome/fontawesome yarn add @fortawesome/fontawesome-pro-light It gets the packages successfully. Now I want to include the package to my angular-cli. In my app.component.ts I tried to do (as described at: https://www.npmjs.com/package/@fortawesome/fontawesome): import

Using Leaflet.AwesomeMarkers plugin with Font Awesome 5?

由 我们两清 提交于 2019-12-10 17:51:11
问题 How do I upgrade to Font Awesome 5 for the leaflet plugin Leaflet.awesome-markers? This plugin has not been updated on github for some time and uses font awesome v4. This is for an app that uses mapbox, leaflet and leaflet awesome markers with font awesome v4 and works correctly. I've tried to upgrade to Font Awesome 5 like so: app.scss @import url('webfonts/font-awesome-pro-5.0.1.css'); @import url('webfonts/fa-solid-900.ttf'); @import url('webfonts/fa-solid-900.woff'); @import url('webfonts
订阅 font-awesome-5