I would like to know how to prevent showing emojis from bootstrap's glyphicons?
This
<span class="glyphicon glyphicon-tent"></span>
Renders to this (opera, moz)
I Stumbled across this:
https://apple.stackexchange.com/questions/41228/why-do-emoji-like-appear-when-i-use-safari-but-not-chrome
Unicode here :
http://www.fileformat.info/info/unicode/char/26fa/index.htm
Solution: Update your Bootstrap to the latest version.
Better alternative to avoid such problems is to use font-awesome instead of twitter bootstrap glyphicons and as a bonus you could get more icon set than glyphicons provide. But if you still want to use bootstrap glyphicons it is better to copy the unicode for that glyphicons (since glyphicons use unicode internally) and append the code as given in this answer.
use i tag insted of span like <i class="glyphicon glyphicon-tent"></i> may be it will help
Related
While creating a project on the Nuxt + Tailwind stack, I stumbled upon another problem.
Following the documentation I wanted to add a background image, but css does not display it (other Tailwind classes work)
**.vue
<div class="bg-[url('img/stories/desktop/18-days-voyage.jpg')]">
<h3>The Mountains</h3>
<p>by John Appleseed</p>
Read story
</div>
However, if I am use the img tag with the same path to the image, then it displays.
<img src="img/stories/desktop/18-days-voyage.jpg" alt="" />
Need to make the first way work. Can you tell me where to dig? Thanks in advance.
Is it possible in bootstrap 3 to set an element to be block for mobile (xs) and inline for all other screen sizes?
For example:
<span class="display-block-xs">content here</span>
yes you can use it this way
<div class="visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">fadi</div>
this div will become block on mobile but inline block on others devices screen
I made some research it seem that on bootstrap 3 you have already:
.visible-xs-inline
and
.visible-xs-inline-block
and you can use:
.hidden-xs
for inline elements safely. Hope it can help you.
Is there a way to change autocomplete rule for attribute values in PhpStorm 7.1 (or disable it)?
I mean I want to change autocomplete from
<div class=""></div>
to
<div class=''></div>
In addition to already stated workarounds by Noah.
It's not possible to choose quote symbol in such case.
Please watch/vote this ticket to get notified on progress: http://youtrack.jetbrains.com/issue/WEB-459
I've been using PhpStorm since v5, but have not found a way to address this.
However, this behaviour can vary, depending on how you're getting to the quotes.
If you're typing <div class= and it's automatically filling in the "" for you, you can remove that by [unsetting "Automatically add quotes for attribute values"].
If you're using tab-completion, like <div cla[TAB], then there doesn't seem to be much you can do, except press backspace after tab. I haven't
You can set up your own Live Template <div class='$END$'></div> to give you your desired format.
There may be a plugin or two that can change / override PhpStorm's default behaviour, but I haven't looked too much.
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme
One of my most common operations in textmate is to encapsulate a block of text in a <div>.
How can i create a keyboard shortcut for this? I do not really feel like learning anything complex, so simple solutions would work best - thanks!
Maybe I didn't understand your question, but what about the "Wrap Selection in Open/Close Tag" (Ctl-Shift-W) from the HTML bundle? Having a block of text selected then overtyping the default <p> with <div> does the work. See http://manual.macromates.com/en/bundles#html
But the following snippet :
${0:${TM_SELECTED_TEXT/\A(.)<\/div>\z|./(?1:$1:$0<\/div>)/m}}
does the same thing without even typing the tag ...
HTH
This might slightly off topic, but you might be interested in using Zen coding for Textmate, which allows you produce lots of HTML with a few key strokes.
You write:
div#page>div.logo+ul#navigation>li*5>a
You get:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
(disclaimer: the example code is from the above mentioned site)
Besides that it adds features for easy navigation of editable parts of HTML, for easy wrapping of content using the same syntax as above. This last past would allow you to wrap any text (content) in whatever HTML you would like.
Happy coding :)