I know this may be a very silly question, but I've not managed to find anything online about a potential solution.
I am using Sphinx 1.4 and the sphinx_rtd_theme to generate some documentation for my Django project. I've been trying to find a way to use font-awesome icons in the .rst files but have found no way to do it. I've had a look at the sphinx_rtd_theme source files and the fa-* icons are included in the theme.css file. However, I'm unaware of a way actually to have them included.
Is it a directive, interpreted text or anything similar? I've tried icon, fonticon and fa as either of the above and none worked.
Any help would be appreciated.
I know I can potentially use raw HTML, but I'd like to avoid that if at all possible.
You can use Sphinx's rst-class directive, as follows:
.. rst-class:: fa fa-fontawesome
the font awsome flag will be attached to this paragraph
rst-class will set the class attribute for the next element as specified.
The following code renders only the icon:
.. rst-class:: fa fa-font-awesome
|
Of course, you can also use custom classes to further style the element.
You can also use https://sphinx-panels.readthedocs.io/en/latest/#inline-icons:
:fa:`bars`
:fa:`spinner,text-white bg-primary fa-2x,style=fa`
I am just learning Sphinx and had the same question, but using raw HTML is fine for my case. Maybe this solution will be helpful to someone out there...
In the conf.py file, add a link to your Fontawesome Kit Code URL
html_js_files = [
'https://kit.fontawesome.com/##########.js',
]
Then, use fontawesome icons in Sphinx with the raw HTML directive
.. |fa-fort-awesome| raw:: html
<i class="fab fa-fort-awesome"></i>
Here is some text |fa-fort-awesome| with the icon in the middle.
Here is how it renders as HTML...
In order to make the icons available on HTML and Latex download FontAwesome Web Package from https://fontawesome.com/download, include font-awesome/svgs/solid into your project _static folder and make use of image directives like bellow:
The |fa-bars| function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.
.. |fa-bars| image:: _static/font-awesome/svgs/solid/bars.svg
:width: 20px
:alt: hamburguer button
Results:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
The <i class="fa fa-bars"></i> function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.
Related
I want to remove this shadow:
So that it looks like a regular HTML:
How do I do that?
Normally (in HTML/XML file) that would be Tag style. And XML styles may be taking over HTML here (as an underlying language in IDE's styling hierarchy perhaps).
I'm not sure if this will work here but try this anyway (can be used in other scenarios):
Select some code (e.g. a whole tag) in such a file.
Invoke Help | Find Action... (or Search Everywhere and focus on "Actions" tab)
Locate Jump to Colors and Fonts entry there and invoke it.
See if a popup will have the related style listed (does not seem to list it here in PhpStorm using HTML+PHP file in my quick test -- only lists PHP styles).
P.S. It's not a "text shadow" but a background color.
Warning: I'm a noob. The little I know comes from fiddling around.
I maintain a hobby website of images created in bootstrap 3 and I would like to have a responsive rollover image that also links to the full size image.
I have been able to complete the responsive rollover part, but I can't figure out how to add the link to display the full image.
Here's what I have so far:
https://jsfiddle.net/11cmcznn/
HTML:
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div>
I can't post the CSS because I don't have reputation points yet.
Any help would be much appreciated.
Put href before the div and make sure you close the parent div too. Like this
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div></div>
Well I've run into another problem. I have the rollover image working properly including linking to the full size image. But for some reason whenever I add the code to the webpage and the style sheet, somehow the webpage is looking for the style sheet in the wrong place on my website.
I have a style sheet "default.css" that I use for all my webpages. This css sheet is in the root of the website. But for some reason the webpage with the rollover image will not display the image, and when I inspect the element within Chrome it gives me 404 error stating that the default.css is not found in a certain folder on the website. I've never had the default.css in any folder besides the root.
So somehow the webpage is looking for a style sheet in a place where none exists, and I have no idea why.
If I copy the default.css style sheet from the root into the folder it's looking for then the webpage loads properly, but I don't want to have to maintain two identical style sheets. I just don't know how the style sheet got attached to the webpage.
I'm sorry for the vagueness of this problem, but I don't know enough to make a more informed question.
On my Joomla 2.5 site, I set up a menu with Maximenu CK. I have the plugin Maximenu params, too, for easy styling. I am using the blank theme for a horizontal menu.
Problem: I wasn't able to apply a custom Google font though. More specifically: which css to change?
I tried to track down the location with Firebug, but found that the font-definition was inline in my main html. I guess this is done with php and include, but don't know where to look further.
I have never worked with Google custom fonts but this is how I was able to change Maximenu CK's font family to a usual font like Palatino, Arial or Tahoma:
From Joomla root directory I navigated to modules/mod_maximenuck/themes/blank/css which I assume is the directory containing blank theme's styling files.
Within the css directory, I found the following files: ie7.css, index.html,maximenuhck.php, maximenuhck_rtl.php, maximenuvck.php, moo_maximenuhck.css, moo_maximenuhck_rtl.css and moo_maximenuvck.css.
I was able to change menu font by updating maximenuhck.php
Here is the portion of code to which I added my preferred font family (starts at line 12):
/* menu */
div#<?php echo $id; ?> {
font-size:14px;
line-height:21px;
text-align:left;
}
I hope this is helpful.
One way to do it would be to treat this the same as for any other text on the page which you wish to style.
In the head of your template bring in the font file, e.g.
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
Using firebug check the class of menu and target anchor tags inside that menu with CSS which you add to your site CSS file, e.g.
.maximenuCKH a{
font-family: 'Open Sans Condensed', sans-serif;
}
You might have to tweak the selector to suit your needs, but this will hopefully get you started.
I am trying to install firebug lite onto IE and Chrome. The documentation states to simply add the javascript location in the document and all should be well. This works but the iframe containing then firebug is hidden with a visibility: hidden attribute. I am unable to find anywhere to actually activate the firebug, normally you would think you could right click and "inspect" but that option is not there. The chrome extension and bookmarklet works but my main concern is trying to firebug through internet explorer.
Anyone had or solved this issue?
Yeah I had the same problem using the stable channel. I switched to the debug channel & it worked perfectly, opening right up. So use this:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
Also, I find it useful to throw a quick 300px-high div in there at the bottom of my page to make room for Firebug Lite, like this:
<div style="display:block; height:300px; background:blue;"></div>
Just don't forget to remove it with the FBL script tag!
How these application allow users to upload their own templates? How is this possible?
Do they have some kind of a their own template engine or..?
Tumblr gives you two options to include your own theme:
If it is just for personal use: by changing the html of the theme. If you go to your tumblr-website and click on the customize button, you can edit the html. In the header file the content of your .css must be pasted between the <style type="text/css"> </style> tags. And you can add some javascript there. For the html I suggest to read the manual that Mirko Adari suggested: Tumblr Theme manual
If you want it to be a theme on itself: submit your theme to the Theme Garden: Tumblr Theme Garden
Blogger is a bit more rigid. Also there you can change your html file. Keep in mind that it's markup for posts is different then Tumblr. Also custom CSS files can be added (more information on that). If you are less familiar with css and html Blogger offers some buttons so that you can change the basics to your own needs. Blogger also offers a way to backup and restore your theme. A more detailed explanation can be found here. This template file must be an .xml file. More information on the markup of this xml-template can be found here.