I'm having a little bit of trouble trying to show some font awesome icons. I have some text that is written in json through a rakefile, and i am trying to incorporate a font awesome icon within the text, but having troubles because the text is in json, I was wondering if someone could take a quick look at it and help me out. The icon is not appearing, however within the dev tools, there is extra blank space where it should be appearing.
I am using haml, with angular on the front end. I don't think I am needed to show the controller for this. I also, did sub out what i really have with deez nuts.
The area in my rakefile is so
{
"partial":"message",
"params":{
"primary": true,
"icon": "<i class='fa fa-odnoklassniki'></i>",
"body":" With Deez Nuts as your president, you can have the full assurance of knowing that your country will be awesome "
}
},
and the haml file that should render this is here
%div{ 'ng-if' => 'option.params.primary' && 'option.params.icon'}
%div{ 'ng-include' => "'/assets/ng/features/politicians/satire/presidents.html'" }
Your html is probably stripped by angular. Inspect the output to make sure. You can add this filter to your app to render trusted html:
.filter('trustedHtml', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}])
and than you can apply it to any data: {{foo | trustedHtml}}
Related
I am wondering if it is possible to do a block transform that uses a createBlock function that can set a className on a block. I also wonder if a block transform that uses a createBlock function can target a block variation.
I am working on a WordPress shortcode block transform and have slowly figured out how to make it work (see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-transforms/#shortcode). The code so far will allow you to copy and paste into the WordPress editor (I think you have to use right click and paste match styles {let me know if that is also wrong}) and will create a group with 2 paragraphs inside it. The last thing I am trying to figure out is if I can apply a box shadow block style (that is already registered) to the group during the transform. Currently I am trying to do that with className and have tried style, styles, etc...) I have tried to look through source code and many documentation pages, but I am not finding if that is possible. I was trying to just do it with className and it doesn't appear to work.
const transforms = {
from: [
{
type: 'shortcode',
tag: ["shadow"],
priority: 1,
transform: ( attrs, shortcodeObj ) => {
return createBlock( 'core/group', { className: "is-style-box-shadow" }, [
createBlock( 'core/paragraph', { content: attrs.named.heading }),
createBlock( 'core/paragraph', { content: shortcodeObj.shortcode.content })
] );
}
}
],
};
And this is the shortcode to paste into the editor
[shadow heading="Heading Test"]
This content should be accessible in the transform
[/shadow]
Alternatively, another solution would be to transform to a block variation that already has the block style defined, but I am not finding if that is possible either. Any advice would be really helpful to trying to perfect copy and paste into WordPress.
I have a website where I accept payments, it is built with react
I am using a credit card processor who provides an iframe to embed in my website to capture the credit card securely the code looks like this.
<iframe data-field-id="card-number" src='URL_TO_PROCESSOR_DOMAIN...'/><.iframe>
Which displays an input for the credit card number on the page, they also provide a way to pass custom styling to the input like this.
let style = {
"border-color": "red",
"font-size": "20px"
...
}
Then you call a function they provide
setFieldStype("card-number", style)
to apply the style to the generated input.
However I am looking to also pass the font-family which I use to the input but it doesn't apply it, I tried it like this.
let style = {
"border-color": "red",
"font-size": "20px"
"font-family": "my custom font"
}
But it doesn't work since the iframe doesn't have access to my custom imported font.
Is there a way I can accomplish to use a font imported by my website in an iframe?
This is only work with the appropriate CORS header is set. We can append a <link/> element to your iframe and pass the font file for it.
const applyStyle = () => {
const linkTag = ele.createElement("link");
linkTag.id = "custom-link";
linkTag.href = " link to font... /fonts/custom-font.css";
linkTag.rel = "stylesheet";
ele.head.appendChild(linkTag);
}
I want to implement a tag input on my form and have the available tags auto-suggested; so these are the libraries I am using:
http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
https://github.com/bassjobsen/Bootstrap-3-Typeahead
This is how I initialize the two libs together:
$(document).ready(function() {
$('input#tags').tagsinput({
typeahead: {
source: ["mysql-server", "apache", "php", "nginx", "phpmyadmin"]
}
});
});
When I begin typing ph it starts suggesting two available tags like this:
When I make a selection, e.g. php - this what happens:
This happens with all tags, it does the tag and then there's a shadow version of the selected tag from the suggestion.
Any ideas?
I would like to display emojis on my webpage in a react chat app. The plan is to give the user a list of emojis to select from. How do I use the codes like '1F683' and have them display the emoji on the page? I need to support Chrome.
I am able to use css to show the emoji.
<div className="smiley"></div>
.smiley:after {
content: "\01F683";
}
I can also have a list of images and map them to the code and display an img element per emoji.
Is there another way and which is the best way to do this?
I am maybe late to the party but I needed to conditionally render different emojis by the same component, so for me the easiest way was:
Go to https://unicode.org/emoji/charts/full-emoji-list.html
Find needed emojis, for example U+1F609 and use it as a string of a hex number 0x1F609 with String.fromCodePoint in your code — see below.
Create one little component to satisfy eslint rule which would otherwise throw an error
Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby jsx-a11y/accessible-emoji:
const Emoji = React.memo(({ className, label, symbol }) =>
<span className={className} role="img" aria-label={label}>
{String.fromCodePoint(symbol)}
</span>)
export default Emoji
So then somewhere else you can use it as:
class MagnificentComponent extends PureComponent {
getEmojiConditionally = () => this.props.happy ? '0x1F60A' : '0x1F61E'
render = () =>
<SomeComponentWhereINeedEmoji>
<Emoji symbol={this.getEmojiConditionally(} />
</SomeComponentWhereINeedEmoji>
}
All emojis are pretty much standardized with the format at Emoji Cheat Sheet, so your given example above (\01F683) maps to railway_car in the Emoji Cheat Sheet.
It might be a better idea to store your emojis with these identifiers and map it to the actual emojis later on, without worrying about encoding the actual emoji (🚃) themselves, or not being able to tell/remember the actual emoji represented by the Unicode sequence (\01F683).
If you wish to map this human-readable identifier to the actual Unicode sequence/symbol itself, you have a few options, using railway_car as an example:
Twemoji Awesome
Twemoji Awesome is like Font Awesome, but with Twitter Emojis.
You can then insert an emoji like this, just like Font Awesome.
<i class="twa twa-railway-car"></i>
This will output the corresponding SVG:
Emoji Dictionary
There's an npm package aptly named emoji-dictionary that allows you to map the emoji name to the Unicode character, if you wish to use default the browser's default emoji renderer.
The usage will then look like this:
emoji.getUnicode("railway_car");
This returns 🚃 (which would display on modern browsers/might break on older browsers/etc).
We have the unicode of emojis in W3C .
It is in the range of {. Hex 2600-26FF.}.
Thus, you can generate it without CSS.
Check example below 👇🏼
class Emoji extends React.Component {
render() {
const {title, code} = this.props;
return <span className="emoji" title={title}>{code}</span>
}
}
class App extends React.Component {
renderEmojis() {
const rangeEmojis = Array.from({length: 256}, (v, k) => (k + 9728).toString(16));
return rangeEmojis.map((code, index) => <Emoji code={unescape ('%u' + code)} title={"My code is :"+code} key={'emj'+index} />)
}
render() {
return (
<div>
{this.renderEmojis()}
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#chat'))
.emoji {
border: solid 1px #3e3e3e;
width: 50px;
height: 50px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section id="chat" />
They are many ways to use emoji's in react. With NPM and also without it by a "span" tag.
<span role="img" aria-label="arrow">➡️</span>
I find this simple and easy to use.
React code for Grinning face with big eyes:
<div>
{String.fromCodePoint('0x1f603')}
</div>
Output:
😃
Full Emoji List, v15.0 - https://unicode.org/emoji/charts/full-emoji-list.html
--
Putting this here just incase anyone else stumbles on this post looking for what I needed.
<p>
After a lot of Googling and reading I just copy/pasted the emoji, it seems to work fine 🤷♂️.
</p>
To get the emoji I went to Discord sent the emoji I needed and copy/pasted it into my code and it shows up on screen.
I'm using image map on my web page and iPad app. Each area on the image map is a clickable element to make sound, which I can do easily with jQuery. But I haven't been able to change the style, like either showing the border, or change the fill color just to indicate that the area is clicked. If anybody has done this, please let me know; it seems simple, but I'm really stumped.
I got it to work thanks to James Treworgy's awesome ImageMaster Jquery plugin.
$('area').mousedown(function(e) {
$(this).mapster('set',true);
});
$('area').mouseup(function(e) {
$(this).mapster('set',false);
});
$('area').bind( "touchstart", function(e){
$(this).mapster('set',true);
});
$('area').bind( "touchend", function(e){
$(this).mapster('set',false);
});
It's hard to say without seeing the code, but the same way you are referencing the parts of the map is the same way you apply the styles.
If you have a section1 id, then you css could be
#section1{
border://something
background-color://something else
}
Or, in your script, when you reference the click, you also add some styles, e.g.,
$('#section1').click(function(){
//whatever
$(this).css({'background-color' : 'red', 'border' : '1px solid black'});
});