I have installed components-font-awesome with bower for my rails application.
I successfully include the sass files,
#import "components-font-awesome/scss/fa-brands";
#import "components-font-awesome/scss/fontawesome";
Then when I am trying to add an icon to my page
<i class="fab fa-facebook-f" style="font-size: 48px;"></i>
it's not been displayed.
I am tracing the element on console and looks good.
It has a font-family:
Font Awesome 5 Brands';
and the right before content
content: "\f39e";
But still it's not displayed.
Include the class fa. It looks like you have used fab.
<i class="fa fa-facebook-f" style="font-size: 48px;"></i>
Related
I am using Bulma and cannot get the tooltip to work on a span, can anyone see what the issue is please?
<span class="favicons fa-layers fa-fw tooltip is-tooltip-bottom" data-tooltip="test">
<i class="fas fa-pound-sign"></i>
<span class="fas fa-caret-down" data-fa-transform="shrink-7 right-10"></span>
</span>
I am expecting to see a tooltip but am not
It seems you use bulma-tooltip extension.
Is extension correctly installed?
Take a look on the docs to see how to install and use it in your site:
https://wikiki.github.io/#installation
If you use webpack, you can add this extension with npm:
npm install bulma-tooltip
I'm new to Ruby on Rails, and have been battling with this issue for a while now.
I have pulled a website from git, and made sure all the dependencies are installed, however, when I run the site, I get the error:
ActionView::Template::Error ("\xA9" on UTF-8)
because of the line linking images using the code image_path("bground2.jpg").
When I remove the image_path("bground2.jpg"), the error is resolved.
I however need image_path("bground2.jpg") and can't do without it.
I have tried the solutions here, but it seems not to work
This is a section of the index.html.erb file, but the error is recurring over all places containing the image_path and image_url:
<%= provide(:title, 'Home') %>
<section id="slider" class="">
<div class="img-responsive" style="background-image: url(<%= image_path("bground2.jpg") %>); background-position: 50% 0;height: 500px;">
<div class="container clearfix">
<!-- <div class="slider-caption slider-caption-center">
<!-- <div class="banner heading-block title-center nobottomborder">
<h1><%= "#{t('.reach_home')}" %></h1>
</div> -->
So, I solved this by reinstalling the Ruby application.
Don't know what had caused it, but I just reinstalled the application and everything works fine.
Thanks all for the help.
I had this very same issue. I identified it to a file I had in my application, actually it was taking place in minified javascript file I had in my Rails app. I open the file in text editor, added a new line and, set the encoding as UTF-8 and saved it, and the problem disappeared.
I don´t see the glyphicons when I load the main page with a proper code.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Star
</button>
<i class="glyphicon glyphicon-search"></i>
<span class="glyphicon glyphicon-star"></span> Star
I have fonts in /app/assets/fonts/bootstrap.
In the applications.js file:
//= require bootstrap-sprockets
//= require bootstrap
In the application.css.scss file:
#import "bootstrap-sprockets";
#import "bootstrap";
In the Gemfile file:
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sprockets-rails'
gem 'sass-rails', '~> 5.0'
In the _glyphicons.scss file:
#font-face {
font-family: 'Glyphicons Halflings';
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}
And in the _variables.scss file:
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
//** File name for all font files.
$icon-font-name: "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
Well... I'm not sure if you solved your problem yet. But I had encountered the same issue before, and it wasn't based on the code, your code looks like it should work just fine.
The problem may have been your browser security settings. For example if you were using Internet Explorer it may be in a certain security state, which restricts the downloading of fonts, and the Glyphicons are treated as fonts.
So go to the Security Tab of Internet Options Menu and enable font download.
Unfortunately, there will always be a small amount of people that have such security settings enable and will never see the Glyphicons, so they should always be used with plain-text and not stand-alone.
I have just upgraded jquery mobile from 1.1.0 to 1.1.1 and my navbar is messed up now. Googling I've discovered that, in 1.1.1, the .ui-mini class is added by default.
Unfortunately the documentation isn't up to date so I don't know how to get back the "classic" style for my tabs.
I've tried data-mini="false", data-full="true" but it doesn't works.
Any idea?
Navbar with 1.1.1 Styles:
Seems to be working fine except for the extra margins around the buttons - http://jsfiddle.net/nirmaljpatel/Mc3be/
The .ui-mini class only adds some margin... you can get rid of that:
HTML:
<div id="myNavBar" data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->
CSS:
#myNavBar.ui-mini {
margin: 0 0;
}
Navbar with .ui-mini margin removed:
Here: http://jqueryui.com/docs/Theming/ThemeSwitcher
I found nice widget to switch on the fly jQueryUI themes on my page.
And also I've created my own custom theme. How to add it in list of themes?
I used the same solution as you...downloaded the js from http://jqueryui.com/themeroller/themeswitchertool/, saved it as jquery.themeswitcher.js and replaced all http jquery-ui urls with google apis https urls.
The only changes were in the var switcherpane where each link looks like:
<li><a href=
"http://jqueryui.com/themeroller/css/parseTheme.css.php?....">
<img src=
"http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_dark.png" alt=
"UI Darkness" title="UI Darkness" /> <span class="themeName">UI
darkness</span></a></li>
Which I replaced with:
<li><a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<img src="content/images/theme_90_ui_light.png" alt="UI Lightness" title=
"UI Lightness" /><span class="themeName">UI lightness</span></a></li>
You can add your custom images as a <li> in the var switcherpane.
If you search through the file there are a few other html images that are referenced further down.
As far as legality goes, I'm not too sure but I can't see why you would't be able to as jQuery UI is free and open source.