Showing posts with label icons. Show all posts
Showing posts with label icons. Show all posts

Monday, November 21, 2022

[FIXED] How to package several icons for different sizes in a VS C++ app?

      , , , ,      No comments   

Issue

I'm developing a C++ app in Visual Studio 2022 with a UI (UI library is wxWidgets). I'm trying to figure out how icons work. I gathered from researching that Windows expects a variety of different icons to be packaged with apps for the best UX (see Which icon sizes should my Windows application's icon include?). However I can't seem to find a way to get multiple icons taken into account.

My understanding so far is that all resource related things, including icons, are controlled by Resource.h and <projectName>.rc, both of which are initially provided by the VS template for a C++ App.

I've removed the provided icons (i.e the "normal" and "small" ones) and have instead imported many icons, one for each size, in the Resource View.

Resource View

But regardless of that, always one icon seem to be used at a time.

Checking the contents of <projectName>.rc, I see the following:

.rc excerpt

I also expect the following, in Resource.h, to be relevant:

Resource.h excerpt

It seems that independently of the icon sizes, IDI_ICON1 is used. If it's 16x16, it's upscaled in context that requires it, if it's 256x256, it's downscaled (poorly, somehow ?) when required i.e in almost all contexts.

How should this be done ? Are there resources available on the matter I may have missed ?


Solution

You should embed all your ico files with different resolution into one ico file. The ico file is actually a container and can contain multiple images inside.



Answered By - Dmytro Ovdiienko
Answer Checked By - Katrina (PHPFixing Volunteer)

Saturday, November 19, 2022

[FIXED] How to get user icon clickable to show user profile

      , , ,      No comments   

Issue

I'm trying to make the user profile icon clickable to show the user info (email address) and logout in bootstrap/html. Does anyone know how to do this in bootstrap or html like it is done here in an example using angular materials.

User Profile Icon Screenshot

Here is a codepen and snippet of what I currently

Codepen HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />

<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material- 
theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq- 
 snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" 
   integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+" 
   crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">   
<link rel="stylesheet" href="../css/core2.css"> 
</head>

<body class="loggedin">
  <div class="site-wrapper">
  <!-- HEADER -->
   <header id="header">
     <nav class="navbar navbar-expand-lg mb-2">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
      target="#sidebar- 
       wrapper"  aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle 
         navigation">
            <span class="material-icons">menu
            </span>
        </button>

    <a href='/' class="navbar-brand">
      <img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
    </a>    
   

    <div class="vl"></div>

    <div class="nav-container">

      <ul class="nav-items">
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li class="nav-item-select nav-item-dropdown">
          <a class="dropdown-trigger" href="#">Select SFA</a>
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="vl"></div>
    <div class="nav-container">

      <ul class="nav-items">
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li class="nav-item-select nav-item-dropdown">
          <a class="dropdown-trigger" href="#">Select Program Year</a>
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="navbar-collapse collapse" id="Div1">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
          <a href="#" class="nav-link" title="Settings"><i class="fas fa-search"></i></a>
        </li>

        <li class="nav-item rounded-icon">
          <a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b 
     class="caret"></b></a>
        </li>
      </ul>
    </div>
  </nav>

</header>
<!-- SPONSOR INFO SECTION -->

 <main role="main" id="main">
  <div id="wrapper">
    <!-- SIDEBAR -->
    <div id="sidebar-wrapper" class="sb-wrapper collapse">
        <i class="fas fa-chevron-circle-left"></i>
      
      <div class="list-wrapper">
        <div class="nav-wrapper">
          <ul class="sidebar-nav">
            <li>
              <a href="#" v-b-tooltip.hover.right title="Entity Manager">
                <div> Entity Manager</div>
              </a>
            </li>
           .....

      </div>

    </div>

    <!-- CONTENT -->
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div id="midcol-nslp" class="p-3">
         
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="clearfix"></div>

 </main>

 <footer class="mt-auto fixed-bottom">
   <div class="container-fluid py-2">
    <div class="row">
      <div class="col text-center small">
        &copy; 2020 Colyar Technology Solutions, LLC. All rights reserved.
      </div>
      <div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
        <ul class="nav">
          <li class="nav-item">
            <a href="mailto:info@colyar.com?subject=Website Test"><i class="fas fa-envelope- 
       open-text" data-toggle="tooltip" data-placement="top" title="Contact Support"></i></a>
          </li>
        </ul>
      </div>
      </div>
    </div>
   </footer>
    <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Popper JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> 
       </script>

      <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> 
   </script>
    <script src="../JS/app.js"></script>


    <script>
        $("#menu-toggle").click(function (e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });

             document.getElementById("datetime").innerHTML = formatAMPM();

            function formatAMPM() {
            var d = new Date(),
                minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : 
               d.getMinutes(),
                hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
                ampm = d.getHours() >= 12 ? 'pm' : 'am',
                months = 
          ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' 
       '+d.getFullYear()+' '+hours+':'+minutes+ampm;
            }
    </script>
    
 </body>

 </html>

Hopefully this is enough to help with what I'm trying to do.


Solution

You would want a single button dropdown, but and put your userinfo and logout inside the div and set the image icon style in the button instead.

https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns

Here is some sample code to get you started with.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="user-icon"></i></button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="info-header">Profile</div>
    <div class="user-email">richard.belding@bayside-hs.com</div>
    <button class="btn btn-primary>Logout</button
  </div>
</div>


Answered By - Jae
Answer Checked By - Terry (PHPFixing Volunteer)

[FIXED] How can I add a Bootstrap Icon in a placeholder?

      , , ,      No comments   

Issue

I am trying to add the search icon in a input text, but I don't know how to do it. I want to do something like:

input search

Is it possible to use Bootstrap Icon in a Placeholder? I saw some examples, but the icon didn't disappear when I was writing text


Solution

Add Css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Add Js
 <script src="https://kit.fontawesome.com/yourcode.js"></script>

Add input in <form>
 <input style="font-family: FontAwesome;" placeholder='&#xf002 Search...' />


Answered By - Himesha Patel
Answer Checked By - Mildred Charles (PHPFixing Admin)

Thursday, November 17, 2022

[FIXED] How to icon vertically center when i enter small one line content in hover box? it is possible or not?

      , , ,      No comments   

Issue

Hello i was try to set icon on hover but working fine when box content is same line but when i enter small content one line in any box than icon was not proper vertically center also i have attachment what is issues ans what i want. i wast set position relative and top with percentage please any solution fot that isses. content is none block on box hover. Thanks in adavance.

Same line code : enter image description here

When enter small one line content : enter image description here

section { padding: 100px 0; }
            img { max-width: 100%; }
            * { box-sizing: border-box; }
            figure {
                position: relative;
            }
            .blog-hover-icon { 
                -webkit-transition: 0.3s;
                transition: 0.3s;
                position: absolute;
                height: 100%;
                width: 100%;
                background: rgba(37, 37, 37, 0.5);
                top: 0;
                left: 0;
                text-align: center;
                z-index: 1;
                visibility: hidden;
                opacity: 0;
            }
            .box .blog-hover-icon {
                visibility: visible;
                opacity: 1;
            }
            .box .blog-hover-icon span {
                font-size: 30px;
                line-height: 30px;
                color: #fff;
                position: relative;
                top: 12%;
            }
            .box .post-content {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 30px;
                background-color: #252525;
                z-index: 2;
                color: #fff;
            }
            .box .post-content a {
                color: #5971ff;
            }
            .box .post-content a:hover {
                text-decoration: none;
            }
            .box .post-content p {
                display: none;
            }
            .box:hover .post-content p {
                display: block;
            }
            .box .post-content .author {
                margin-top: 10px;
            }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
            <div class="container">
                <div class="row h-100">
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1000/1000" alt="test">
                                </a>
                                <div class="blog-hover-icon"><span>+</span></div>
                            </div>
                            <figcaption>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1000/1000" alt="test">
                                </a>
                                <div class="blog-hover-icon"><span>+</span></div>
                            </div>
                            <figcaption>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text</p>
                                    <div class="author">
                                        <span class="text-uppercase">25 jun / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1000/1000" alt="test">
                                </a>
                                <div class="blog-hover-icon"><span>+</span></div>
                            </div>
                            <figcaption>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">05 dec / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </section>


Solution

Please change your html and css code as per below and update it.

section { padding: 100px 0; }
            img { max-width: 100%; }
            * { box-sizing: border-box; }
            figure {
                position: relative;
            }
            figure figcaption {
                position: absolute;
                bottom: 0;
                top: 0;
                height: 100%;
                width: 100%;
                -ms-flex-direction: column;
                -webkit-box-orient: vertican;
                -webkit-box-direction: norman;
                flex-direction: column;
                display: -ms-flexbox;
                display: -webkit-box;
                display: flex;
                -webkit-transition: 0.3s;
                transition: 0.3s;
            }
            .blog-hover-icon { 
                -webkit-transition: 0.3s;
                transition: 0.3s;
                z-index: 1;
                visibility: hidden;
                opacity: 0;
            }
            .box:hover .blog-hover-icon {
                visibility: visible;
                opacity: 1;
            }
            .box .blog-hover-icon span {
                font-size: 30px;
                line-height: 30px;
                color: #fff;
                position: relative;
                top: 12%;
            }
            .box .post-content {
                padding: 30px 40px;
                background-color: #252525;
                z-index: 2;
                -webkit-transition: 0.3s;
                transition: 0.3s;
                color: #fff;
            }
            .box .post-content a {
                color: #5971ff;
            }
            .box .post-content a:hover {
                text-decoration: none;
            }
            .box .post-content p {
                display: none;
            }
            .box:hover .post-content p {
                display: block;
            }
            .box .post-content .author {
                margin-top: 10px;
            }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
            <div class="container">
                <div class="row h-100">
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1200/1200" alt="test">
                                </a>                                
                            </div>
                            <figcaption>
                                <div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1200/1200" alt="test">
                                </a>                                
                            </div>
                            <figcaption>
                                <div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
                                    <p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="col-md-4 box">
                        <figure>
                            <div class="blog-image position-relative">
                                <a href="#">
                                    <img src="http://placekitten.com/1200/1200" alt="test">
                                </a>                                
                            </div>
                            <figcaption>
                                <div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
                                <div class="post-content text-center">
                                    <div class="card-title"><a href="#">Leopard is an animal design.</a></div>
                                    <p>Lorem Ipsum is simply.</p>
                                    <div class="author">
                                        <span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>                                    
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </section>



Answered By - Satish
Answer Checked By - Pedro (PHPFixing Volunteer)

Friday, July 29, 2022

[FIXED] How to cover image with an icon

      , , ,      No comments   

Issue

Here's example https://jsbin.com/rekaxa/edit?html,css,output. I'd like to put that red circle(an icon) over the image, but to keep html straightforward. What's the best way(maybe totally different) to implement it?


Solution

You haven't said where you want the icon to be so I picked the dead center of the div.

div {
  background-color: green;
  width: 280px;
  height: 180px;
  position: relative;
}
img {
  margin: 0 auto;
  display: block;
}
div:after {
  content: '';
  position: absolute;
  top: 50%; /* adjust as requiured */
  left: 50%; /* adjust as required */
  margin-top: -15px;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  background: red;
  display: block;
  border-radius: 15px;
}
<div class="icon">
  <img src="http://dummyimage.com/200x150/000/fff" />
</div>



Answered By - Paulie_D
Answer Checked By - Marilyn (PHPFixing Volunteer)

Thursday, July 28, 2022

[FIXED] How do you resize icon images without losing transparency?

      , ,      No comments   

Issue

I used icon directly in html as below:

<div class="tabbertab" title='<img height="20" width="20" src="<%=contextPath%>/images/icons/bicycle.png">&nbsp;Bicycle</img>'>

So the icon image got placed besides Bicycle text.

The text is a part of Tab. Which on selection changes color (white to light blue and vice versa).

The background of the icon also reflects this as icon is having a transparent background. And as you can see, I resized the image according to the place where it is going to be displayed.

However, now I got the requirement to use the icon inside javascript code as below:

iconFile = siteroot + '/images/icons/bicycle.png';   
anchor.style.backgroundImage = 'url(' + iconFile + ')';  
anchor.style.backgroundRepeat = 'no-repeat';         
anchor.style.backgroundPosition = '1px 2px';

where siteroot is the path to the root of the application.

Since here I am directly using the icon file in the size it is available. I resized the icon image using mspaint to 20 by 20 pixel.

However, now the icon image seems to be in a white box (and not transparent) of 20 by 20 and so the icon background color is not changing as per the background of the tab it is in.

Are there any good open source tools to resize icon images without losing transparency. I am not having access to photoshop.


Solution

The reason you can see the background in the original one is because the icon file has a transparent background.

You say you resized the icon to 20x20 - I am guessing whatever program you used to do this lost the png transparency that was on the original .png file, and turned the background white.

Try using the non-resized image instead (even if it looks wrong) to verify this is correct, then use a css resizing solution or a better program to resize the icon that won't lose the transparency information.



Answered By - NibblyPig
Answer Checked By - Timothy Miller (PHPFixing Admin)

Monday, July 18, 2022

[FIXED] Why is an animated .gif icon not showing in JTable column?

      , , , ,      No comments   

Issue

Here is the processing.gif Here is the processing.gif

Here is initial.png Here is initial.png

Here is the output Here is the output

Here is the code. processing.gif is working in other locations such as in the tab of a JTabbedPane. Here in the column of a JTable, it is not showing. Any explanation and solution? processing.gif is a moving icon that indicates that something is loading. 

import javax.swing.*;
import javax.swing.table.*;

public class TableIcon extends JFrame
{
    public TableIcon()
    {
        ImageIcon initial = new ImageIcon(getClass().getResource("initial.png"));
        ImageIcon processing = new ImageIcon(getClass().getResource("processing.gif"));


        String[] columnNames = {"Picture", "Description"};
        Object[][] data =
        {
            {initial, "initial"},
            {processing, "processing"}
        };

        DefaultTableModel model = new DefaultTableModel(data, columnNames);
        JTable table = new JTable( model )
        {
            public Class getColumnClass(int column)
            {
                return getValueAt(0, column).getClass();
            }
        };
        table.setPreferredScrollableViewportSize(table.getPreferredSize());

        JScrollPane scrollPane = new JScrollPane( table );
        getContentPane().add( scrollPane );
    }

    public static void main(String[] args)
    {
        TableIcon frame = new TableIcon();
        frame.setDefaultCloseOperation( EXIT_ON_CLOSE );
        frame.pack();
        frame.setVisible(true);
    }

}

Solution

Animated gif's don't work well by default in JTable. But there is an easy way to fix this, use the AnimatedIcon class that can be found here

Basically, it reimplements Icon interface, register where you rendered the icon, and when a new frame of the gif needs to be painted, it will automatically repaint the correct area.

There is another alternative provided here where you register a specific ImageObserver for each cell that needs to render an animated gif, but I find it a bit more tedious.



Answered By - Guillaume Polet
Answer Checked By - Senaida (PHPFixing Volunteer)

Wednesday, July 6, 2022

[FIXED] How to insert icon or image on PHPMailer Subject field

      , , , ,      No comments   

Issue

I'm trying to insert a siren icon on my Subject field but I've no idea how to do it since the field doesn't accept special characters nor images.

I'm using PHPMailer and my goal is to get on something like this: Print of a Email subject in my mailbox


Solution

This is just an emoji. To be clear, this one: 🚨

In order for you to use emojis in your subject or email body, you need to set the charset to UTF-8

$mail = new PHPMailer();
$mail->CharSet = 'UTF-8';


Answered By - stui
Answer Checked By - Pedro (PHPFixing Volunteer)

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...